Next.js creates fast search engine optimized React apps with zero configuration. Want to know about react in 1 minute, click the card below.
A traditional React app is rendered client-side, where the browser starts with a shell of an HTML page, lacking any rendered content. From there the browser fetches the JavaScript file containing the React code to render content to the page and make it interactive. But there are two major drawbacks with client-side rendering:-
- One, the content is not reliably indexed by all search engines or read by social media link bots.
- And two, it can take longer to reach the first contentful paint when a user first lands on the web page.
Next is a framework that allows you to build a React app that renders the content in advance on the server. So the first thing a user or a search bot sees is the fully rendered HTML. After receiving this initial page, client-side rendering takes over and it works just like a traditional React app. It's the best of both worlds - Fully rendered content for bots and highly interactive content for users.
Inside of a Next.js project, you have a pages directory. Each javascript file defined here exports a React component that represents a route in the application.
In other words, the file structure here mirrors the actual URL's that the user will navigate to and Next provides its own router to make navigation seamless.
import { useRouter } from "next/router"; 👈
export default function App() {
const router = useRouter();
const { name } = router.query;
return <h1>{name}</h1>;
}
But the real magic comes into play when we talk about data fetching because next can perform multiple server rendering strategies from a single project.
Static Generation
A static generation or Pre-rendering allows you to render your pages at build time. Each page or component can implement a function called "getStaticProps". It might fetch data from a cloud database, then pass the data as props to the component.
export async function getStaticProps(){ 👈
const req = await fetch(`/some-api`);
const app = await req.json();
return{
props:{app},
}
}
export default function app ({app}){
return <h1>{app.data}</h1>
}You can then build your app to render out all the HTML locally and upload it to a storage bucket where it can be easily cached by a CDN. Such server-less services are popularly provided by Netlify, Vercel, Github Pages, etc. That works great for a blog or any kind of app where the data doesn't change often.
Server-Side Rendering
If the data does change often you can implement server-side rendering. It builds the HTML page each time it's requested by the user. In the component, we implement data fetching with the "getServerSideProps" function.
export async function getServerSideProps(){ 👈
const req = await fetch(`/some-api`);
const app = await req.json();
return{
props:{app},
}
}
export default function app ({app}){
return <h1>{app.data}</h1>
}Instead of running at build time, this function runs at request time. That means the page will fetch the latest data on the server each time a new request comes in. That's great for pages with rapidly changing data.
Incremental Static Regeneration
Maybe you want something in between static and server-side rendering? Yet another option is incremental static regeneration. By simply adding a revalidate option to get static props, Next can regenerate a page whenever a new request comes in within a certain time interval.
export async function getStaticProps(){
const req = await fetch(`/some-api`);
const app = await req.json();
return{
props:{app},
revalidate: 30, 👈
}
}Read the official documentation of Next.js for more information.
This has been Next.js in 1 minute. If you want to read more 1 minute reads like this. Make sure to subscribe to my blog. Thanks for reading and I will see you in the following one.
