随着现代 Web 应用的发展，前端工程师更加注重页面性能的优化。服务端渲染 (SSR) 是提高 Web 应用性能的重要手段之一。而 Next.js 则是目前很受欢迎的 React SSR 框架。在使用 Next.js 进行 SSR 时，除了注意调整页面渲染流程的性能，还可以通过一些技巧来进一步提升页面性能。本文介绍 Next.js SSR 优化方面的三个实践：缓存、合并和 CDN。
缓存
缓存是通过存储资源的副本以提高响应速度的一种策略。常见的缓存方式有浏览器缓存、服务器缓存以及 CDN 缓存等。Next.js 中使用缓存主要是为了避免重复的渲染（比如浏览器回退或者用户在同一页面间不断切换），从而提升页面的渲染速度。Next.js 中的缓存主要分为两类：静态缓存和动态缓存。
静态缓存
静态缓存主要是指在页面渲染过程中变化较少的部分，比如头部、底部和导航等。我们可以通过 getStaticProps 方法中返回的 revalidate 参数设置静态缓存的有效期。比如下面的代码中，我们将头部和底部组件的静态缓存设置为 1 天。
// javascriptcn.com 代码示例
import Header from 'components/Header';
import Footer from 'components/Footer';
export default function Home({ products }) {
return (
<div>
<Header />
<main>{/* 常规内容渲染 */}</main>
<Footer />
</div>
);
}
export async function getStaticProps() {
const products = await fetchProducts();
return {
props: {
products,
},
revalidate: 86400, // 设置静态缓存时间为 1 天
};
}动态缓存
动态缓存主要是指在页面渲染过程中经常变化的部分，比如用户信息和新闻动态等。我们可以通过 getServerSideProps 来设置动态缓存的有效期。下面的代码中，我们将用户信息的动态缓存有效期设置为 5 秒钟。
// javascriptcn.com 代码示例
export default function Profile({ user }) {
return <div>{user ? `Hello, ${user.name}!` : 'Loading...'}</div>;
}
export async function getServerSideProps(context) {
const session = await getSession(context);
const user = session?.user ?? null;
return {
props: {
user,
},
// 设置动态缓存有效期为 5 秒钟
// 如果不设置 revalidate，那么每次请求都会重新计算页面
revalidate: 5,
};
}合并
在 SSR 过程中，由于存在多个组件，每个组件都需要独立的执行渲染流程，可能会导致请求过多从而降低页面性能。Next.js 提供了 getServerSideProps 函数来执行某些有必要的数据的合并，从而减少渲染流程的次数。
下面是一个示例，使用 getServerSideProps 函数将多个组件的响应合并到页面并发出单个请求：
// javascriptcn.com 代码示例
export default function Home({ posts, comments }) {
return (
<div>
<h1>Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
<h1>Comments</h1>
<ul>
{comments.map((comment) => (
<li key={comment.id}>{comment.body}</li>
))}
</ul>
</div>
);
}
export async function getServerSideProps() {
const [posts, comments] = await Promise.all([
fetchPosts(),
fetchComments(),
]);
return {
props: {
posts,
comments,
},
};
}CDN
CDN 是一种通过缓存能够加快 Web 页面加载速度的解决方案。在 SSR 中，使用 CDN 主要是为了缓存 JavaScript 和 CSS 等静态文件，从而加快页面的加载速度。
我们可以使用 next/dynamic 模块将返回需要在页面生产上加载的组件，并且在构建过程中提取出组件需要依赖的 JS 和 CSS 文件。由于对于经常更新的文件而言 CDN 可能不是最佳缓存策略，所以我们可以使用 react-loadable 模块来为动态加载的组件实现缓存，这样可以提高动态渲染的性能。
下面是一个示例，使用各种缓存策略对页面的 JS 和 CSS 文件进行缓存：
// javascriptcn.com 代码示例
import dynamic from 'next/dynamic';
const MyComponent = dynamic(() => import('components/MyComponent'), {
ssr: false, // 关闭服务端渲染
loading: () => <div>Loading...</div>,
});
export default function Home() {
return (
<div>
<h1>Hello, world!</h1>
<MyComponent />
</div>
);
}总结
本文介绍了 Next.js SSR 优化方面的三个实践：缓存、合并和 CDN。在实际开发中，对于特定的性能问题，可以根据情况进行结合使用。通过运用这些实践，可以有效地提高页面性能，提供更好的用户体验。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653728b37d4982a6ebf8d242