Nuxt.js Next.js Nest.js

Nuxt.js和Next.js都是服務端渲染框架(SSR)，屬于前端框架,Nest.js則是node框架,屬于后端框架。
其中Nuxt.js是vue的ssr框架，Next.js是react的ssr框架。
都是比vue和react更上層的前端框架。

文章目錄

- - 1.SSR
  - 2.Nuxt
  - - 2.1 Nuxt的下載
    - 2.2 Nuxt的集成
    - 2.3 Nuxt的特征
    - 2.4 Nuxt的工作流程
    - 2.5 Nuxt的目錄結構
    - 2.6 Nuxt的路由
  - 3.Next
  - - 3.1 Next的下載
    - 3.2 Next的特征
  - 4.Nest
  - - 4.1 Nest的下載
    - 4.2 Nest的特征
    - 4.3 Nest的使用
  - 5.總結

1.SSR

服務端渲染（Server-Side Rendering，簡稱 SSR）是一種將網頁內容在服務器端動態生成并發送給客戶端的技術。
傳統的客戶端渲染（Client-Side Rendering，簡稱 CSR）是在客戶端瀏覽器中使用 JavaScript 動態生成頁面內容。

在傳統的客戶端渲染中，瀏覽器首先下載一個空的 HTML 頁面，然后通過 JavaScript 請求數據并生成頁面內容。這種方式的優點是可以提供更豐富的交互和動態效果，但也存在一些缺點。例如，搜索引擎爬蟲可能無法正確解析和索引頁面內容，導致 SEO（搜索引擎優化）問題。同時，初始加載時用戶可能會看到空白的頁面或者出現閃爍的內容。

相比之下，服務端渲染通過在服務器上預先生成完整的 HTML 頁面，將其發送給客戶端瀏覽器。這樣，瀏覽器在接收到頁面時就能夠立即顯示完整的內容，而不需要等待 JavaScript 的下載和執行。這樣可以提高頁面的加載速度和首次渲染速度，并且對于搜索引擎爬蟲來說更容易解析和索引頁面內容，有利于 SEO。

服務端渲染的實現方式通常涉及使用服務器端框架（如Node.js、Java、Python等）來處理請求，并在服務器上生成完整的 HTML 頁面。服務器端框架可以使用模板引擎或者直接在后端代碼中生成 HTML。一旦生成完整的 HTML 頁面，服務器將其發送給客戶端瀏覽器，瀏覽器接收到后即可直接顯示頁面內容。

需要注意的是，服務端渲染不是完全取代客戶端渲染，而是根據需求和場景選擇合適的渲染方式。一些頁面或組件可能更適合使用客戶端渲染，以提供更好的交互和動態效果。而對于需要更好的首次加載速度和 SEO 的頁面，服務端渲染則是一個有價值的選擇。

2.Nuxt

Nuxt是一個開源框架，它使Web開發變得直觀和強大。自信地創建高性能和生產級全棧Web應用程序和網站。

2.1 Nuxt的下載

在這里插入圖片描述

npx nuxi@latest init <project-name>cd project-namenpm inpm run dev

在這里插入圖片描述

2.2 Nuxt的集成

nuxt基本上是由vue2，webpack，babel這三個構成的。

Nuxt.js 集成了以下組件/框架，用于開發完整而強大的 Web 應用:

Vue2
Vue-router
Vuex (當配置了 Vuex 狀態樹配置項時才會引入)
Vue 服務器端渲染 (排除使用 mode: ‘spa’)
Vue-Meta

Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 來處理代碼的自動化構建工作（如打包、代碼分層、壓縮等等）。

2.3 Nuxt的特征

特征:

基于 Vue.js
自動代碼分層
服務端渲染
強大的路由功能，支持異步數據
靜態文件服務
ES2015+ 語法支持
打包和壓縮 JS 和 CSS
HTML 頭部標簽管理
本地開發支持熱加載
集成 ESLint
支持各種樣式預處理器：SASS、LESS、 Stylus 等等
支持 HTTP/2 推送

2.4 Nuxt的工作流程

工作流程: 一個完整的服務器請求到渲染的流程。

request -> nuxtServerInit -> middleware -> validate -> asyncData -> render
在這里插入圖片描述

2.5 Nuxt的目錄結構

目錄結構:

├── README.md
├── components
├── dist
├── jest.config.js
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
├── store
├── test
├── tree.txt
└── yarn.lock

nuxt的配置文件在nuxt.config.js文件:

export default {// Global page headers: https://go.nuxtjs.dev/config-headhead: {title: 'nuxt-demo',htmlAttrs: {lang: 'en'},meta: [{ charset: 'utf-8' },{ name: 'viewport', content: 'width=device-width, initial-scale=1' },{ hid: 'description', name: 'description', content: '' },{ name: 'format-detection', content: 'telephone=no' }],link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]},// Global CSS: https://go.nuxtjs.dev/config-csscss: ['ant-design-vue/dist/antd.css'],// Plugins to run before rendering page: https://go.nuxtjs.dev/config-pluginsplugins: ['@/plugins/antd-ui'],// Auto import components: https://go.nuxtjs.dev/config-componentscomponents: true,// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modulesbuildModules: [],// Modules: https://go.nuxtjs.dev/config-modulesmodules: [],// Build Configuration: https://go.nuxtjs.dev/config-buildbuild: {}
}

2.6 Nuxt的路由

Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模塊的路由配置。

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

Nuxt.js 自動生成的路由配置如下:

router: {routes: [{name: 'index',path: '/',component: 'pages/index.vue'},{name: 'user',path: '/user',component: 'pages/user/index.vue'},{name: 'user-one',path: '/user/one',component: 'pages/user/one.vue'}]
}

還有其他的路由方式，比如動態路由，路由參數校驗，嵌套路由和動態嵌套路由等等。

3.Next

在這里插入圖片描述

Next.js 是一個開源的 React 框架，用于構建服務器渲染（SSR）和靜態生成（SSG）的應用程序。它結合了 React 的聲明性和靈活性以及服務器端渲染的性能優勢，使得構建高性能的應用變得更加簡單。

3.1 Next的下載

npx create-next-app my-app

在 pages 目錄下創建您的頁面文件，每個文件將映射到一個路由。

// pages/index.js
function HomePage() {return <h1>Hello, Next.js!</h1>;
}export default HomePage;

在頁面文件中編寫 React 組件，可以使用 JSX 語法和任何其他 React 功能。

npm run dev

3.2 Next的特征

服務器渲染和靜態生成： Next.js 支持服務器渲染和靜態生成兩種方式。服務器渲染可以提供更快的首次加載時間和更好的 SEO。靜態生成則可以預先生成頁面，并在每個請求之前提供響應，從而具有出色的性能。
熱模塊替換: HMR, 在開發過程中，您可以實時更新代碼并立即看到變化，無需手動刷新頁面。
自動代碼拆分: Next.js 可以根據頁面和組件的需求自動拆分代碼，只加載當前頁面所需的代碼，從而提高性能和加載速度。
路由系統: Next.js 提供了簡單而強大的路由系統，可以輕松地定義頁面之間的導航關系，并支持動態路由、嵌套路由等功能。
CSS模塊支持: Next.js 內置了對 CSS 模塊的支持，使得組件級別的樣式隔離和管理變得更加簡單。

Next.js 是一個強大而靈活的框架，為 React 開發者提供了構建高性能應用程序的便利性。它的服務器渲染和靜態生成功能、熱模塊替換和自動代碼拆分等特性使得開發過程更加高效和愉快。

4.Nest

在這里插入圖片描述

Nest.js 是一個基于 TypeScript 的框架，用于構建可擴展和模塊化的服務器端應用程序。它結合了 Angular 的依賴注入和模塊化、Express 的靈活性和 Node.js 的性能優勢，使得構建高性能的應用變得更加簡單。

Nest是一個漸進的Node.js框架, 它可以在 TypeScript和JavaScript(ES6、ES7、ES8)之上構建高效、可伸縮的企業級服務器端應用程序。
Nest基于TypeScript編寫并且結合了OOP(面向對象編程), FP(函數式編程)和FRP(函數式響應編程)的相關理念。Nest是Node.js版的Spring框架。
Nest底層HTTP平臺默認是基于Express實現的, 無需擔心第三方庫的缺失。
Nest的核心思想是提供了一個層與層直接的耦合度極小, ,抽象化極高的一個架構體系。

4.1 Nest的下載

npm install -g @nestjs/clinest new project-namenest g resource user

在這里插入圖片描述

類似綁定一個App.vue

4.2 Nest的特征

基于 TypeScript: Nest.js 使用 TypeScript 編寫，可以利用靜態類型檢查和強類型約束來提高代碼質量和開發效率。
aop: Nest.js 提供了 Angular 風格的依賴注入機制，使得組件之間的協作和解耦變得更加簡單。
模塊化: Nest.js 支持模塊化編程，可以將應用程序拆分成多個可重用的模塊，從而提高代碼的可維護性和可擴展性。
路由系統: Nest.js 提供了強大的路由系統，可以輕松地定義 API 路由和請求處理程序，并支持中間件和管道等功能。
多數據庫支持: Nest.js 支持多種數據庫，包括 MongoDB、MySQL、PostgreSQL 等，可以輕松地與數據庫進行交互。

4.3 Nest的使用

創建user的相關業務邏輯。

nest g resource user

user.controller.ts
user.service.ts
user.module.ts

user.controller.ts

import { Controller, Get, Post, Body, Patch, Param, Delete } from '@nestjs/common';
import { UserService } from './user.service';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';@Controller('user')
export class UserController {constructor(private readonly userService: UserService) {}@Post()create(@Body() createUserDto: CreateUserDto) {return this.userService.create(createUserDto);}@Get()findAll() {return this.userService.findAll();}@Get(':id')findOne(@Param('id') id: string) {return this.userService.findOne(+id);}@Patch(':id')update(@Param('id') id: string, @Body() updateUserDto: UpdateUserDto) {return this.userService.update(+id, updateUserDto);}@Delete(':id')remove(@Param('id') id: string) {return this.userService.remove(+id);}
}