服务器渲染

Sat, 05 Oct 2024 00:00:00 +0800

前言

什么是SSR(Server-Side Rendering)？类似于用Java、ASP.NET、php开发前端页面，服务端准备数据并执行页面渲染，然后把完整的HTML发送给客户端。现代化的SSR通常和Vue、React等前端框架强关联，通过Node.js在服务端提前将page、component使用同构方式渲染为html代码，其目的是在实现SSR时尽量复用一套渲染机制。例如Vue框架就同时支持了CSR(Client-Side Rendering)和SSR。

SSR能解决什么问题？

SEO: Google、百度、Yandex、Bing或者Yahoo等搜索引擎会通过网络爬取你的页面并建立索引，如果的信息越完整，那么你的网站就更容易被检索到。使用SSR技术，让页面在服务端提前渲染好再返回给客户端，这样各类搜索引擎就能拿到比较完整的页面信息，提升检索质量。
首屏渲染：SPA(Single Page Application)将页面渲染放到客户端执行，并且在渲染之前要加载大量的Javascript代码，所以首屏渲染需要花费较长时间。而SSR直接在服务端渲染完再返回客户端，使用户能够快速看到页面内容。

有哪些框架支持SSR？

开源库	支持语言	star数	描述
Nuxt	Vue	54.9k	快速构架、类型安全、高性能、易扩展
Next	React	127k	老牌框架、社区完善、Data Fetch、Styling
quasar	Vue	26k	丰富的UI、支持桌面端和移动端
Remix	React	29.9k	极致的用户体验、开箱即用

本知识点将以 Nuxt 为例，介绍如何实现 SSR。

什么是Nuxt

基于Vue、React、Angular实现的full-stack框架数不胜数，但就Vue框架领域内，应该数Nuxt最为Top 1。Nuxt保持了Vue生态的“开箱即用”特性，类似于Vite，几条指令就可直接run起来。如果你熟悉Vue，那么基于Nuxt写应用，体验上和写Vue客户端应用极其相似。

Nuxt提前预制了一套目录结构，并自动处理路由、导入、数据获取，开发人员仅需按约定的规则实现页面、组件、数据API即可，极大降低开发人员学习成本。Nuxt的特性可总结为：

基于文件的路由: 页面统一添加到pages/目录下，例如添加index.vue、about.vue、contact.vue，就可以通过/访问首页，通过/about返回关于页面；
代码分割：得益于Vue的Virtual Node，Nuxt根据目录规则提前生成完整的依赖树，这样能够将所有code拆分为最小单元的chunks, 从而减少应用初始化加载时间；
开箱即用的SSR：Nuxt内部使用Vue的SSR，除了Vue实现SSR、CSR本身的差异，可以像开发CSR的Vue应用一样来开发SSR，降低研发心智负担；
自动导入：在实现页面或组件时，不需要像CSR手动导入(import Card from './Card.Vue')依赖，当Nuxt识别到有使用外部组件，bundle过程会自动识别；
数据获取工具：提供一套组合式FetchAPI，实现client、server端的同构；
配置好的构建工具：默认使用Vite构建，同时支持Webpack、Rspack；

Nuxt的架构设计和vue/core很相似，将整体功能拆分为独立的package:

核心引擎：nuxt；
bundlers: 打包器包含@nuxt/vite-builde、nuxt/webpack-builder、@nuxt/rspack-builder；
命令行工具：nuxi；
服务端引擎：nitro；
开发套件：@nuxt/kit；

上手体验

初始化项目

使用nuxi提供的指令初始化项目：

npx nuxi@latest init nuxt-learn-examples

如果安装过程下载失败，可能需要配置hosts:

185.199.108.133 raw.githubusercontent.com

最新nuxt版本3.14初始化的项目目录比较简单，少了pages、plugins等目录，入口为app.vue：

服务器渲染 on Last Stand

服务器渲染

前言

什么是Nuxt

上手体验

初始化项目