在实践中掌握 Next.js：服务端渲染的奥秘

前端

2023-12-01 20:01:08

Next.js 服务端渲染：提升你的全栈应用体验

服务端渲染的威力

服务端渲染（SSR）是一项变革性的技术，它在服务器上生成 HTML，再将其发送给客户端。与客户端渲染相比，SSR 拥有诸多优势，包括：

闪电般的页面加载速度： 提前生成的 HTML 减少了客户端渲染时间，显著提升了页面加载速度。
无与伦比的 SEO： 服务器呈现的 HTML 易于搜索引擎索引，有助于提高搜索结果中的排名。
卓越的用户体验： 页面在服务器端呈现，无需等待 JavaScript 加载和渲染，带来无缝流畅的体验。

Next.js：SSR 的理想选择

Next.js 是基于 React 的全栈框架，将 SSR 的强大功能与现代 JavaScript 生态系统的便利性巧妙融合。使用 Next.js，你可以轻松创建：

交互式用户界面： 与 React 无缝集成，助你打造响应迅速、用户友好的界面。
全面支持的全栈应用： 开箱即用的全栈支持，涵盖服务器端路由、数据获取和 API 路由。
性能至上： 采用代码分割、路由预取和图像优化等技术，全力优化应用程序性能。

打造你的首个 Next.js SSR 应用

现在，让我们动手创建一个 Next.js SSR 应用，领略它的魅力：

创建新项目： 使用 npx create-next-app 命令创建一个新的 Next.js 项目。
添加 SSR 页面： 在 pages 目录下创建新文件（如 index.js），使用 getServerSideProps 函数获取服务器端数据。
获取数据： 在 getServerSideProps 函数中，使用 fetch API 或其他库从后端获取数据。
渲染页面： 使用页面组件（如 Index.js）呈现从服务器获取的数据。

// pages/index.js
import { getServerSideProps } from 'next';

export async function getServerSideProps() {
  const res = await fetch('https://example.com/api/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

const Index = ({ data }) => {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
};

export default Index;