服务端渲染(SSR)与静态网站生成(SSG)：Next.js入门

2024-07-05 10:08| 来源: 网络整理| 查看: 265

服务端渲染（SSR）指的是在服务器上动态生成HTML页面的过程，这些页面在加载到浏览器前已包含了所有必需的数据和元素。与之相对的是静态网站生成（SSG），它在构建阶段就生成了所有页面的HTML文件，这些文件可以被部署到CDN上，实现快速的内容分发。

SSR的优势：

SEO友好：搜索引擎更容易抓取服务端渲染的页面。首屏加载快：用户无需等待所有JavaScript都加载执行完毕。

SSG的优势：

更快的页面加载速度：静态页面可以被CDN缓存，并且不需要额外的服务器时间处理请求。安全性更好：静态文件不太可能遭到服务器端的安全攻击。

Next.js框架介绍 Next.js是一个轻量级的React服务端渲染应用框架，集成了Webpack、Babel等现代web开发的多项技术。Next.js的热门特性包括：

自动代码分割：提高页面加载速度。静态导出：将React应用导出为静态应用。 API路由：轻松创建API接口。

第三章：Next.js的SSR实现在Next.js中，页级的SSR通过getServerSideProps或getInitialProps函数实现，它们在每个请求中被调用，并返回一个对象，其中包含了渲染页面所需的props。

代码示例：使用getServerSideProps：

import { GetServerSideProps } from 'next'; export const getServerSideProps: GetServerSideProps = async (context) => { const res = await fetch(`https://api.example.com/data`); const data = await res.json(); return { props: { data }, // 将会被传递到页面组件作为props }; }; const Page = ({ data }) => { return ( {/* 渲染获取到的数据 */} {data.map((item) => (

{item.content}

))} ); }; export default Page;

在服务器收到请求后，getServerSideProps将被调用，获取数据并作为props传递给React组件。当组件被渲染时，它会使用这些props来生成完整的页面。

第四章：Next.js的SSG实现 SSG是Next.js 9.3以后引入的功能，通过getStaticProps和getStaticPaths来实现静态页面的生成。实现SSG的步骤： 1. 使用getStaticProps来获取必要的数据。 2. 如果你的页面路径依赖于外部数据，使用getStaticPaths来定义这些路径。 3. 将这些数据传递给React组件。代码示例：使用getStaticProps和getStaticPaths：

import { GetStaticProps, GetStaticPaths } from 'next'; export const getStaticProps: GetStaticProps = async () => { const res = await fetch(`https://api.example.com/data`); const data = await res.json(); return { props: { data }, }; }; export const getStaticPaths: GetStaticPaths = async () => { const paths = [ { params: { id: '1' } }, { params: { id: '2' } } // 更多路径... ]; return { paths, fallback: false }; }; const Page = ({ data }) => { // 静态内容的渲染 return ( {data.map((item) => (

{item.content}

))} ); }; export default Page;

通过这种方式，Next.js会在构建时生成每个静态页面，并在全球CDN上进行部署。这些页面在请求时将立即可用，无需运行额外的服务器端代码。

总结：服务端渲染（SSR）和静态网站生成（SSG）的基本区别在于内容的生成时机和方式。服务端渲染（SSR）的特点：

动态生成：当用户发起请求时，服务器实时渲染页面内容。服务器负载：每个页面请求都需要服务器处理，这会导致服务器负载较高。用户请求响应：内容是在用户请求时生成，因此可以提供最新的数据。SEO优化：由于页面内容在到达浏览器前已经渲染，这有助于改善搜索引擎优化（SEO）。首屏时间：相较于客户端渲染（CSR），SSR可以更快地显示首屏内容。

静态网站生成（SSG）的特点：

预构建页面：页面在构建阶段生成，并作为静态文件存储，通常部署在CDN上。无服务器处理：请求静态页面不需要服务器动态生成内容，减少了服务器的计算负担。缓存优势：静态文件可以被缓存，提供即时的页面加载体验。数据更新：更新内容需要重新构建静态页面。SEO优化：静态页面易于被搜索引擎抓取，因此同样有良好的SEO表现。总的来说，SSR是在每次用户请求时在服务器端生成页面内容，适合内容经常变化的应用；而SSG是在构建时生成所有页面，并将其部署为静态资源，适合内容不经常更新或变化的网站。两者都有各自的应用场景和优势，开发者可以根据具体需求选择适合的渲染策略。

【本文地址】

公司简介

联系我们