Armin RezaeiPartial Pre-Rendering: A New Feature in Next.js 14
Partial Pre-Rendering: A New Feature in Next.js 14
Next.js is a framework that enables developers to build fast and scalable web applications using React. It offers features such as hybrid static and server rendering, code splitting, and automatic routing. In October 2023, Vercel, the company behind Next.js, released Next.js 14, a major update that focuses on delivering performance improvements. One of the key features of this release is partial pre-rendering, which combines static site generation with server-side rendering without requiring new APIs for developers. This feature optimizes the compiler to handle dynamic content and offers significant performance boosts. In this article, we will explain what partial pre-rendering is, how it works, and how to use it in your Next.js projects.
What is Partial Pre-Rendering?
Partial pre-rendering is a feature that allows Next.js to pre-render only the parts of a page that are static, while leaving the dynamic parts to be rendered on the server or on the client. This way, Next.js can serve a static shell of the page as soon as possible, while fetching and rendering the dynamic data in the background. This improves the perceived performance and user experience of the page, as well as the SEO and accessibility.
Partial pre-rendering is different from the existing pre-rendering modes in Next.js, which are static site generation (SSG) and server-side rendering (SSR). SSG generates and serves static HTML files at build time, while SSR generates and serves dynamic HTML files at request time. Both modes have their advantages and disadvantages, depending on the use case and the data source. SSG is faster and more scalable, but it requires a rebuild for every data change. SSR is more flexible and up-to-date, but it adds latency and server load.
Partial pre-rendering aims to combine the best of both worlds, by pre-rendering the static parts of the page at build time, and rendering the dynamic parts at request time or on the client. This way, Next.js can leverage the benefits of SSG, such as fast delivery and caching, while also supporting dynamic and personalized content, such as user authentication and real-time updates.
How Does Partial Pre-Rendering Work?
Partial pre-rendering works by analyzing the components of a page and determining which ones are static and which ones are dynamic. Next.js uses a heuristic based on the presence of hooks, such as useEffect, useLayoutEffect, and useRouter, to identify the dynamic components. Next.js then splits the page into two parts: a static shell and a dynamic skeleton. The static shell contains the HTML, CSS, and JavaScript of the static components, while the dynamic skeleton contains the placeholders for the dynamic components. Next.js pre-renders the static shell at build time and serves it as a static HTML file. Next.js also bundles the dynamic skeleton as a JavaScript file and sends it along with the static shell. The dynamic skeleton then hydrates the placeholders with the dynamic data, either by fetching it from the server or from the client.
Partial pre-rendering is enabled by default in Next.js 14, and it does not require any configuration or code changes. However, developers can opt out of partial pre-rendering by using the next.config.js file or by using the next/dynamic module. Developers can also customize the behavior of partial pre-rendering by using the fallback and revalidate options in the getStaticProps function.
How to Use Partial Pre-Rendering in Next.js Projects?
To use partial pre-rendering in Next.js projects, developers can follow these steps:
1. Create a page component that exports a getStaticProps function. This function should return an object with the props property, which contains the data for the static components of the page. For example:
// pages/index.js
import React from 'react'
export default function Home({ posts }) {
return (
<div> <h1>Home</h1> <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> </div>
)
}
export async function getStaticProps() {
// Fetch posts from an external API
const res = await fetch('https://jsonplaceholder.typicode.com/posts')
const posts = await res.json()
// Return the posts as props
return {
props: {
posts,
},
}
}2. Create a dynamic component that uses hooks, such as useEffect, useLayoutEffect, or useRouter, to fetch or render the dynamic data. For example:
// components/Counter.js
import React, { useState, useEffect } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
// Increment the count every second
useEffect(() => {
const interval = setInterval(() => {
setCount((prevCount) => prevCount + 1)
}, 1000)
return () => clearInterval(interval)
}, [])
return <div>Count: {count}</div>
}3. Import and use the dynamic component in the page component. For example:
// pages/index.js
import React from 'react'
import Counter from '../components/Counter'
export default function Home({ posts }) {
return (
<div> <h1>Home</h1> <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> <Counter /> </div>
)
}
export async function getStaticProps() {
// Fetch posts from an external API
const res = await fetch('https://jsonplaceholder.typicode.com/posts')
const posts = await res.json()
// Return the posts as props
return {
props: {
posts,
},
}
}
4. Build and run the Next.js project. Next.js will automatically pre-render the static shell of the page and serve it as a static HTML file. Next.js will also hydrate the dynamic skeleton of the page with the dynamic data on the client. For example:
Conclusion
Partial pre-rendering is a new feature in Next.js 14 that combines static site generation with server-side rendering without requiring new APIs for developers. It optimizes the compiler to handle dynamic content and offers significant performance boosts. Partial pre-rendering is enabled by default in Next.js 14, and it does not require any configuration or code changes. However, developers can opt out of partial pre-rendering by using the next.config.js file or by using the next/dynamic module. Developers can also customize the behavior of partial pre-rendering by using the fallback and revalidate options in the getStaticProps function. Partial pre-rendering is a powerful feature that enables developers to build fast and scalable web applications using Next.js and React.
I hope this article was helpful for you.