服务器 (ssr) 在渲染页面时向 API 发出请求，但浏览器也会发出相同的请求，这意味着对已从服务器获取的数据进行双重请求。
我找到了两个解决方案来解决这个问题。
第一个是使用TransferHttpCacheModule，我唯一要做的就是将此模块添加到appModule
第二种是直接使用传输状态 api，这意味着我必须在每个执行 http 请求的服务或解析器中手动添加一些依赖于传输状态 api 的逻辑。例如：
我必须更改此解析器
@Injectable()
export class CourseResolver implements Resolve<Course> {
constructor(private coursesService: CoursesService) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {
const courseId = route.params['id'];
return this.coursesService.findCourseById(courseId);
}
}
这样做是为了避免浏览器的第二次请求。
@Injectable()
export class CourseResolver implements Resolve<Course> {
constructor(
private coursesService: CoursesService,
@Inject(PLATFORM_ID) private platformId,
private transferState:TransferState) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {
const courseId = route.params['id'];
const COURSE_KEY = makeStateKey<Course>('course-' + courseId);
if (this.transferState.hasKey(COURSE_KEY)) {
const …我的 React 应用程序在客户端渲染中运行良好。出于 SEO 目的，我正在尝试在我的应用程序中实现服务器端渲染。
当我运行 server.js 文件时出现错误。
我该如何解决这个问题？ 服务器.js
import path from 'path';
import fs from 'fs';
const PORT = 8080;
const app = express();
const router = express.Router();
app.use(express.json());
const serverRenderer = (req, res, next) => {
const content = ReactDOMServer.renderToString(
<Provider store={store}>
<PresistGate presist={presist}>
<StaticRouter location={req.url} context={{}}>
<App />
</StaticRouter>
</PresistGate >
</Provider>
);
fs.readFile(path.resolve('../dist/index.html'), 'utf8', (err, data) => {
if (err) {
console.error(err);
return res.status(500).send('An error occurred');
}
return res.send(data.replace('<div id="root"></div>', `<div id="root">${content}</div>`));
});
};
router.use('*', …我根据以下示例添加了材质 UI。
https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
以下是我的代码。
import React from 'react';
import Document, {Head, Html, Main, NextScript} from "next/document";
import {ServerStyleSheets} from '@material-ui/core/styles';
import theme from "../theme";
export default class MyDocument extends Document {
render() {
return (
<Html lang={"en"}>
<Head>
<meta name={"theme-color"} content={theme.palette.primary.main}/>
<link rel={"stylesheet"}
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</Head>
<body>
<Main/>
<NextScript/>
</body>
</Html>
);
}
}
MyDocument.getInitialProps = async (ctx) => {
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => {
originalRenderPage({
enhanceApp: (App) => (props) => …我的 Angular 10.2.1 应用程序使用自定义 webpack 构建器在 .scss 文件中提供 PostCSS 支持，在 SPA 模式下工作得非常好。
\n角度.json
\n "build": {\n "builder": "@angular-builders/custom-webpack:browser",\n "options": {\n "customWebpackConfig": {\n "path": "./webpack.config.js"\n },\nwebpack.config.js
\nlet plugins = [\n require(\'postcss-import\'),\n require(\'tailwindcss\'),\n require(\'autoprefixer\'),\n]\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: \'postcss-loader\',\n options: {\n ident: \'postcss\',\n syntax: \'postcss-scss\',\n plugins: () => plugins\n }\n }\n ]\n }\n};\n我决定按照官方文档添加 SSR 支持ng add @nguniversal/express-engine，但是当我尝试提供 SSR 版本时，出现错误：
ERROR in Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):\nSassError: expected …到目前为止，我还没有深入研究 SSR，但我即将介入，并首先进行一些初步研究，试图让我和该机构朝着最可能的最佳方向前进。这是公司选择 Angular、React 或 Vue 作为 F/E 框架的决定性因素之一，而这些框架也将成为我们的首选。看来 React 和 Next 可能是我们目前最好的前进方向。我重点关注使用 Next 的一些缺点，因为我想确保它们不会破坏交易。
\n在一篇比较 Next、Nuxt 和 Nest 的特定文章中，我看到一个要点，其中指出“Next.js 不是后端”。在其他地方提到 Next 应该补充一个 Node.js 服务器作为后端。我的问题是，这是否表明 Nuxt 和 Nest是后端？那么没有任何理由用 Node 或其他服务器来补充 Nuxt 和 Nest 吗？在我看来，情况并非通常或总是如此。就像 Nuxt 和 Nest 如此神奇以至于它们可以满足您所拥有的大部分或全部服务器需求一样？看起来这不一定是他们的目的……是吗？
\n在同一篇文章中，还有类似的其他三个要点作为 Next 的缺点，我很难看出其他两个框架有何不同。其他要点是：
\n\n\n\xe2\x80\xa2 如果您\xe2\x80\x99 正在创建一个简单的应用程序，它可能有点过头了
\n
\n\n\xe2\x80\xa2 所有数据都需要可以从客户端和服务器加载
\n
\n\n\xe2\x80\xa2 将服务器端应用程序迁移到 Next.js 并不是一个快速的过程，并且根据您的项目，这可能需要太多工作
\n
我一直在尝试在 Azure 上部署使用 NextJS 构建的服务器端渲染的 React 应用程序。我设置了 Azure 管道并成功发布，但运行后，当我访问 azure 网站 URL 时，应用程序似乎没有加载。构建文件内容与客户端渲染的应用程序不同。请分享有关部署 SSR React 应用程序（在 Azure 上）的资源或说明。
我使用此资源来设置管道，没有遇到错误，但 URL 仍然未加载应用程序。
reactjs server-side-rendering azure-web-app-service azure-pipelines next.js
我正在制作一个天气应用程序，我使用 IPIFY 获取客户端 IP，但这会丢失 SSR，或者我使用 SSR 并获取服务器 IP。有人告诉我，我可以使用标头x-forwarded-for，然后使用该值通过 SSR 进行天气 API 调用。
问题是我只使用nextjs，这里没有后端，其次，我不知道如何x-forwarded-for在前端调用或使用来获取客户端IP。
这可能吗？
我怎样才能实现它？
我正在使用 vercel 来部署应用程序。
我多次阅读Next.js 文档，但我仍然不知道getStaticProps使用fallback:true 和getServerSideProps.
据我所理解 ：
获取静态属性
getStaticProps在构建时呈现，并将任何请求作为静态 HTML 文件提供。它与不经常更新的页面一起使用，例如“关于我们”页面。
export async function getStaticPaths() {
return {
paths: [{ params: { id: '1' } }, { params: { id: '2' } }]
}
}
但是如果我们放在fallback:true函数的返回处，并且有一个对构建时未生成的页面的请求，Next.js 会将该页面生成为静态页面，然后该页面上的其他请求将作为静态页面静止的。
export async function getStaticPaths() {
return {
paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
fallback: true,
}
}
所以，getStaticProps's这个概念对我来说非常有效。我认为它可以适用于大多数场景。但如果getStaticProps效果很好，那我们为什么需要呢getServerSideProps？
据我所知，如果我们使用 …
我正在 Gatsby 中创建一个404页面，我想根据用户所访问的路径（不存在）向用户提供类似路径名的建议。如何获取网站中所有现有页面的数组？
最初我在使用 Angular SSR 时遇到了这个包的问题，因为我在导入时遇到了这个错误Window is not defined
server.ts但是，您可以通过以下方式模拟它：
const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();
global.window = mock.getWindow();
我现在收到标题中所述的错误，SVG 未定义。有什么办法可以嘲笑这个吗？
https://github.com/svgdotjs/我相信它在幕后使用
谢谢
next.js ×5
reactjs ×5
angular ×3
javascript ×3
apexcharts ×1
clientip ×1
express ×1
gatsby ×1
html ×1
ip ×1
nestjs ×1
nuxt.js ×1
postcss ×1
redux ×1
redux-saga ×1
tailwind-css ×1
webpack ×1