Skip to main content

SSR vs CSR

CSR - Client side render


SSR - Server side render

优点一: 性能好

优点二: 易于SEO搜索引擎优化

缺点: 开发成本高 (前端框架 + Node.js, 全栈)


应用场景: 

1) 对性能要求高的系统，如移动端，弱网环境

2) 操作交互较简单的系统，否则复杂度会更高

如我的项目中的B端，不适合SSR，因为操作比较复杂


常见的SSR框架: 

React - Next.js (Remix.js)

Vue - Nuxt.js



Next.js

安装:

npx create-next-app@latest


启动:

npm run dev


or

-------

npm run build

npm run start

-------


创建一个简单的网页并且访问:

可以在pages目录下面创建about.tsx,就可以用过localhost:xxx/about来访问了

import Head from 'next/head';

export default function About() {
return <>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<p>hi</p>
</main></>;
}


API

在/api目录下

api的url为 localhost:3000/api/hello


静态资源

在/public目录下，可以创建一个/data,然后再创建一个info.json

就可以使用localhost:3000/data/info.json来访问静态资源


两种形式的pre-render

1) 静态生成(Static Generation)项目构建时，直接产出HTML文件

在静态页面中 请求数据

<p>{props.info}</p>


//只在build的时候执行

export async function getStaticProps() {

    return {

        props: {

            info: "xxxx"

        }

    }

}

上面的代码仅会在构建的时候执行一次。每次请求的时候，都会返回一样的内容


2) Server-side rendering, 每次请求时动态生成HTML

一般需要动态获取数据并计算整合

与上面静态生成不同，使用以下函数

//每次请求的时候都会执行

export async function getServerSideProps() {

    return {

        props: {

            info: "请求来的数据"

        }

    }

}


如何获取动态数据?

比如需要的api为localhost:3000/question/12345

可以在/src/pages/question/ 目录下面创建[id].tsx文件，在文件里面使用

export async function getServerSideProps(context: any) {
const { id = "" } = context.params;

return {
props: {
id,
}

}
}

即可获取id


同理, 如果要使用data数据

可以在/src/pages/stats/目录下面创建[data].tsx

然后在上面的函数中获取data即可






Comments

Post a Comment

Popular posts from this blog

Valgrind

  Using Valgrind to check memory How to use Valgrind -To valgrind the program, run the valgrind command and give it our program name as an argument. -For example, if we want to run ./myProgram hello 42, we can simply run Valgrind ./myProgram hello 42.  Uninitialized Values -When we run the program, we may use uninitialized values. It needs to be fixed. Valgrind can tell us about the use of uninitialized values. But it only tell when the control flow of the program depends on the unitialized value. For example, uninitialized value appears in the conditional expression of an if, or a loop, or in the switch statement. -If we want to know where the uninitialized value is from, we can use Valgrind    --track-origins=yes ./myProgram -Using -fsanitize=address can find a lot of problems that Memcheck cannot.  -We can use Valgrind with GDB to debug. We can run: --vgdb=full --vgdb-error=0., then Valgrind will stop on the first error that it encounters and give control to ...
Post a Comment
Read more

Error Handling and Exceptions

  Error Handling and Exceptions - The worst possible way to deal with any problem is for the program to produce the wrong answer without informing the user - a silent failure.  - When the program deals with an error by aborting, it should do so with the explicit intention of the programmer. (i.e. the programmer should call assert or check a condition then call abort) And the program should give an error message to the user. Simply segmentation fault due to an invalid memory access is never appropriate. - Sometimes we would prefer to handle the error more gracefully. Graceful error handling requires making the user aware of the problem, as well as allowing the program to continue to function normally. - For example, we would present the user with some options to remedy the situation, like entering a different input, select a different file, retry a failed operation, etc.  - As our programming skills develop, we should get into the practice of writing bullet proof code - co...
Post a Comment
Read more

ADTs

  ADTs 1. Queue -FIFO We can implement in this way:  template<typename T> class Queue { public:     void enqueue(const T & item);     T dequeue();     T & peek()     const T & peek() const;     int numbebrOfItem() const; }; - In the actual C++ STL library, it has the following functions: push() pop() peek() 2. Stack - LIFO We can implement in this way: template<typename T> class Stack { public:     void push(const T & item);     T pop();     T & peek();     const T & peek() const;     int numberOfItem() const; }; In the C++ STL library, it has similar functions as queue. 3. Sets - Add - Test if an item is in the set - Check if the set is empty - Take the union of two set - intersect two sets A variant of this ADT is a multiset. (Also called a bag) It allows the same element to appear multiple times, whereas a true set either has an object or n...
Post a Comment
Read more