前端全栈进阶 Nextjs打造跨框架SaaS应用（慕附zy）
原创前端全栈进阶 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 应用程序，你会得到不同的东西：
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），也被称为预渲染。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。