Recent Post:
Categories:
Next.js offers several ways to render pages and generate content, making it a versatile framework for various use cases. In this blog post, we'll explore these methods in detail:
Client-Side Rendering means rendering the content directly in the browser using JavaScript. This approach is typical for Single Page Applications (SPAs). In Next.js, you can achieve CSR by using React components and hooks to fetch data inside the component.
code
'use client';
import { useEffect, useState } from 'react';
function ClientSideRenderedPage() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data')
.then((response) => response.json())
.then((data) => setData(data));
}, []);
return (
<div>
{' '}
<h1> Client - Side Rendered Page</h1> <pre> {JSON.stringify(data, null, 2)}</pre>{' '}
</div>
);
}
export default ClientSideRenderedPage;Server-Side Rendering is done on the server before sending the HTML to the client. This approach helps with SEO and initial load performance. In Next.js, you use getServerSideProps to fetch data at request time.
code
// components/ExampleComponent.tsx
import React from 'react';
type ExampleComponentProps = {
text: string;
};
const ExampleComponent: React.FC<ExampleComponentProps> = ({ text }) => {
return <div>{text}</div>;
};
export default ExampleComponent;
Static Site Generation pre-renders pages at build time, offering the best performance. Use getStaticProps to fetch data at build time and getStaticPaths for dynamic routes.
code
// components/HelloWorld.tsx
import React from 'react';
type Props = { name: string };
const HelloWorld: React.FC<Props> = ({ name }) => {
return <div>Hello, {name}!</div>;
};
export default HelloWorld;Incremental Static Regeneration allows you to update static pages after the site is built. This enables dynamic content without sacrificing the benefits of static site generation.
code
'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/router';
export default function MyComponent({ data }) {
const router = useRouter();
useEffect(() => {
const interval = setInterval(async () => {
const res = await fetch('/api/data');
// Fetch updated data
const newData = await res.json(); // Revalidate the data every 10 seconds
if (res.ok) {
router.replace(router.asPath, null, { shallow: true });
}
}, 10000); // 10 seconds
return () => clearInterval(interval);
}, []);
return (
<div>
{' '}
<h1>Incremental Static Regeneration Example</h1> <p>{data}</p>{' '}
</div>
);
}By understanding these different rendering methods, you can choose the right approach for your Next.js application, balancing performance, SEO, and complexity based on your needs.