next.js 的几种渲染方式

最新推荐文章于 2024-07-25 11:32:05 发布

草明

最新推荐文章于 2024-07-25 11:32:05 发布

阅读量681

点赞数 10

分类专栏： next.js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/galoiszhou/article/details/139485519

版权

next.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

静态生成 (Static Generation)、服务器端渲染 (Server-Side Rendering) 和客户端渲染 (Client-Side Rendering) 是在构建 web 应用时常用的三种渲染策略。它们各自有不同的使用场景和优缺点。下面详细介绍它们的使用场景、差异和适用的情况。

静态生成 (Static Generation)

特点：

在构建时预渲染页面。
每个页面生成静态 HTML 文件。
内容在构建时确定，不会在请求时动态更新（除非使用增量静态再生 ISR）。

使用场景：

内容不经常变化的页面，如博客文章、文档、营销页面。
需要高性能和快速加载的页面。

优点：

加载速度快，性能好，因为内容已经预先生成。
可以通过 CDN 缓存，提高全球访问速度。
更安全，因为没有动态内容生成。

缺点：

构建时间可能较长，特别是页面数量多时
内容更新时需要重新构建和部署。

示例：

// app/posts/page.js
import React from 'react';

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.xxxxx.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}

export default function Posts({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

服务器端渲染 (Server-Side Rendering)

特点：

每个请求在服务器端渲染 HTML。
页面内容在每次请求时生成，因此可以实时更新。

使用场景：

内容需要频繁更新或根据用户请求动态生成的页面。
需要 SEO 优化的动态内容。

优点：

实时性强，内容可以根据每个请求动态更新。
对于需要 SEO 的动态内容友好。

缺点：

渲染速度较慢，因为每个请求都需要服务器端处理。
服务器负载较高，可能需要更强的服务器资源。

示例：

// app/posts/page.js
import React from 'react';

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.xxxxx.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}

export default function Posts({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

客户端渲染 (Client-Side Rendering)

特点：

页面初始加载时只传送一个空的 HTML 框架和 JavaScript 文件。
内容由客户端的 JavaScript 在运行时获取和渲染。

使用场景：

用户交互性强的应用，如单页应用（SPA）。
需要频繁更新和交互的数据，如仪表盘、聊天应用。

优点：

初始加载速度快，因为传输的 HTML 体积小。
更好的用户体验，特别是交互性强的应用。

缺点：

SEO 不友好，因为搜索引擎抓取时可能无法看到动态内容。
首次渲染时可能会有较长的加载时间，因为需要下载并执行 JavaScript。

示例：

// app/posts/page.js
import React, { useEffect, useState } from 'react';

export default function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchPosts() {
      const res = await fetch('https://jsonplaceholder.xxxxx.com/posts');
      const data = await res.json();
      setPosts(data);
    }
    fetchPosts();
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}