前端全栈进阶 Nextjs打造跨框架SaaS应用（慕附zy）

发布于

Nextjs介绍

Next.js是一个构建于Node.js之上的开源Web开发框架，支持基于React的Web应用程序功能，例如服务端渲染和生成静态网站。 React于官方文件内的“推荐的工具链”中提及Next.js，建议将其作为“使用Node.js构建服务器渲染网站”的解决方案。

前端全栈进阶 Nextjs打造跨框架SaaS应用 - 客户端渲染 VS 服务器端渲染

Next.js 也使用了一种叫做服务器端渲染的东西。而为了理解它的工作原理，我们也需要谈谈客户端渲染。

基本上，客户端就是我们在屏幕上看到的东西（用户界面）。这就是客户端，我们能看到的东西。换句话说，它是代码的前端部分。

另一方面，服务器是我们看不到的东西。它是代码的后端，或服务器代码。

现在，在客户端渲染中，应用程序加载并在浏览器上动态地生成输出。换句话说，浏览器使用 JavaScript 渲染页面。

但在服务器端渲染中，我们在屏幕上看到的用户界面不是由浏览器生成的，而是在服务器上生成的。当一个应用程序加载时，它不需要解析浏览器上的用户界面。相反，它来自于服务器端，是在服务器上预先生成的。

Next.js 和 SSR 如何工作？

如果你做了我们之前做的同样的事情，但用 Next.js 应用程序，你会得到不同的东西：

代码语言：javascript
复制
xml复制代码<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Next.js Tutorial</title>
    <meta name="description" content="This is a Next.js Tutorial" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="next-head-count" content="5" />
    <noscript data-n-css=""></noscript>
  </head>
  <body>
    <div id="__next">
      <div>
        <h2>This is the Home Page!</h2>
        <a href="/profile/1"><p>Go to the Profile Page of 1!</p></a>
      </div>
    </div>
  </body>
</html>

现在，这是一个简单的 Next.js 应用程序的源代码。我们看到整个内容，如 HTML、CSS 和 JavaScript。

这意味着，当 Next.js 应用程序加载时，我们在用户界面上看到的网络上的内容已经生成。而这是在服务器上发生的。这是因为 Next.js 利用了服务器端渲染（或 SSR），也被称为预渲染。

#next.js