# preact-vite-wenzhi
**Repository Path**: loyalty-code/preact-vite-wenzhi
## Basic Information
- **Project Name**: preact-vite-wenzhi
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-01
- **Last Updated**: 2024-09-01
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## vite 创建preact项目
npm init preact/pnpm creat preact
```shell
zhangwenzhi@zhangwezhideMBP NewProjects % pnpm init preact
ERR_PNPM_INIT_ARG init command does not accept any arguments
Maybe you wanted to run "pnpm create preact"
zhangwenzhi@zhangwezhideMBP NewProjects % pnpm create preact
.../191ab165f1e-1407 | Progress: resolved 1, reused 0, downl.../191ab165f1e-1407 | Progress: resolved 16, reused 7, down.../191ab165f1e-1407 | +23 ++
.../191ab165f1e-1407 | Progress: resolved 16, reused 7, down.../191ab165f1e-1407 | Progress: resolved 23, reused 14, dow.../191ab165f1e-1407 | Progress: resolved 23, reused 14, downloaded 9, added 23, done
┌ Preact - Fast 3kB alternative to React with the same modern API
│
◇ Project directory:
│ preact-vite-wenzhi
│
◇ Project language:
│ TypeScript
│
◇ Use router?
│ Yes
│
◇ Prerender app (SSG)?
│ No
│
◇ Use ESLint?
│ Yes
│
◇ Set up project directory
│
◇ Installed project dependencies
│
◇ Getting Started ─────────╮
│ │
│ $ cd preact-vite-wenzhi │
│ $ pnpm dev │
│ │
├───────────────────────────╯
│
└ You're all set!
zhangwenzhi@zhangwezhideMBP NewProjects % cd preact-vite-wenzhi
```
```shell
pnpm dev
pnpm build
pnpm preview
```
## 一文搞懂：什么是SSR、SSG、CSR？前端渲染技术全解析
https://segmentfault.com/a/1190000044882791
`一、CSR（客户端渲染）`
示例（使用React）：
```jsx
// 假设有一个React组件
import React from 'react';
function MyComponent() {
const [message, setMessage] = React.useState('Hello, CSR!');
const handleClick = () => {
setMessage('Clicked!');
};
return (
);
}
// 在HTML文件中引入React和组件的JavaScript文件
// 浏览器加载并执行这些JavaScript，从而渲染页面
```
`二、SSR（服务器端渲染）`
示例（使用React的服务器端渲染）：
```js
// 服务器端代码（Node.js）
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const MyComponent = require('./MyComponent').default; // 假设MyComponent是上面定义的React组件
// 渲染组件为HTML字符串
const html = ReactDOMServer.renderToString();
// 将HTML字符串发送给客户端
// ...（这里省略了HTTP服务器和响应发送的代码）
```
`三、SSG（静态站点生成）`
示例（使用Nunjucks模板引擎）：
模板文件（index.njk）：
```html
My Static Site
{{ message }}
```
构建脚本（Node.js）：
```js
const nunjucks = require('nunjucks');
const fs = require('fs');
// 配置Nunjucks模板引擎
nunjucks.configure('views', { autoescape: true });
// 渲染模板
const res = nunjucks.render('index.njk', { message: 'Hello, SSG!' });
// 将渲染结果写入HTML文件
fs.writeFileSync('dist/index.html', res);
// 现在你可以将生成的`dist/index.html`部署到服务器上
```
对于需要丰富`交互效果和实时数据`的场景，可以选择`CSR`；对于需要`优化首屏加载速度和SEO效果`的场景，可以选择`SSR`；而对于`内容更新不频繁、对性能要求高`的场景，可以选择`SSG`。同时，也可以结合使用多种技术来实现更好的用户体验和性能优化。