标签: server-side-rendering

最近我们发现我们的 React 项目必须使用 SSR。我检查了我所知道的每一种方法，并几乎测试了我在媒体和其他网站上找到的所有方法。经过大量工作后，我决定我们必须迁移到 Next JS。

虽然迁移过程一切都很好，但对于样式表而言。

在我们应用程序的旧版本中，我们使用 webpack 将样式与项目捆绑在一起，一切都很好。

这是 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const port = process.env.PORT || 3000;
const extractSCSS = new ExtractTextPlugin('./[name].css');

// const UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {

  mode: 'development',
  output: {
    filename: 'bundle.[hash].js',
    publicPath: '/'
  },
  devtool: 'source-map',
  module: {
    rules: [

      // First Rule

      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],

      },

      // Second Rule

      {
        test: /\.scss$/,
        use: ['css-hot-loader'].concat(extractSCSS.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader?sourceMap', …

我已经使用 nuxtjs 和 vee-validate 创建了一个应用程序，并将其部署到heroku，但是在本地（nuxt build 和 nuxt 在本地计算机中启动），当我按下登录按钮验证时，vee-validate 发生了一切都很好，但在heroku 应用程序中，当按下登录时按钮整个页面刷新，还有“？” 附加在 URL 末尾，例如：- 登录 登录？当点击登录按钮时。帮助我识别这个问题。谢谢，似乎 js 没有运行。

我将 NextJS 与 Material UI 和 Apollo 结合使用。虽然一切正常，但警告没有消失。在我看来，很多 Material UI 组件都在使用useLayoutEffect，这是 React 发出的警告。错误如下。

警告：useLayoutEffect 在服务器上不执行任何操作，因为它的效果无法编码为服务器渲染器的输出格式。这将导致初始的、非水合的 UI 与预期的 UI 之间不匹配。为了避免这种情况，useLayoutEffect 应该只在专门在客户端渲染的组件中使用。请参阅 fb.me/react-uselayouteffect-ssr 了解常见修复。

因此，在我需要开发前端部分的大型应用程序中工作。我们希望它是用于 SEO 目的的 SSR，但是当涉及到状态管理时，我们有 redux，那么我们将如何管理它以及服务器端和客户端配置应该是什么？如果可能的话，也分享例子。我们可以在 next.js 中定义像 react-router 这样的客户端路由吗？

我是 Angular ssr 的新手，你可以看到下面的代码

问题

如果我直接进入客户端路由，首先它会显示

由服务器渲染

但很快它就会重新渲染页面并显示：

由浏览器渲染

我想我知道为什么会发生这种情况，但是可以肯定有人可以提供一个好的解释吗？另外，我可以以某种方式避免这种行为并强制浏览器渲染来自服务器的 html 吗？我应该担心这个吗？

客户端组件.ts

@Component({
  selector: "client",
  template: "<p>Rendered by {{ renderer }}</p>",
  styleUrls: ["./dumco.component.css"]
})
export class ClientComponent implements OnInit {

  renderer: string;
  bla: any = [];

  constructor(private http: HttpClient, @Inject(PLATFORM_ID) platformId: any) {
    this.renderer = isPlatformBrowser(platformId) ? "Browser" : "Server";
  }
}

应用程序路由.module.ts

import { NgModule } from "@angular/core";
import { RouterModule, PreloadAllModules } from "@angular/router";
import { AppComponent } from "./app.component";
import { CompfComponent } from "./compf/compf.component"
import …

我从 Next.js 开始，在浏览文档后，我无法弄清楚如何code在getStaticPaths方法中获取路由参数，如下所示！？。code以任何方式事先都不知道，它可以是任何东西。

我不想调用 api 并在组件内部使用 useEffect 获取数据。

文件：页面/帖子/[代码].js

import React from 'react';
import apiCall from 'api/something';

export default ({post}) => {
     return <>
        render components here based on prop `post`
    </>
}

export async function getStaticPaths() {
    // How to get [code] from the route here, which can be used below?
    return { 
        paths: // NEED [code] HERE from current route,
        fallback: false
    }
} 

export async function getStaticProps(ctx) {
    return { …

我在 Next.js 应用程序中使用 react-tooltip 库。

我注意到每次我在访问使用工具提示的页面时刷新网站时都会收到错误消息：

react-dom.development.js:88 Warning: Prop `dangerouslySetInnerHTML` did not match.

CSS 类在客户端和服务器上是不同的

奇怪的是，从随机页面导航到使用 react-tooltip 的页面时，我没有收到该错误。

工具提示相关代码：

<StyledPopularityTooltipIcon src="/icons/tooltip.svg" alt="question mark" data-tip="hello world" />
<ReactTooltip
    effect="solid"
    className="tooltip"
    backgroundColor="#F0F0F0"
    arrowColor="#F0F0F0"
    clickable={true}
/>

当我尝试react-beautiful-dnd与next.js（或通常与服务器端渲染）一起使用时，在重新排序项目并刷新页面后，我收到此错误：

react-dom.development.js:88 Warning: Prop `data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"

这（取决于第一个）：

react-beautiful-dnd.esm.js:39 react-beautiful-dndA setup problem was encountered.> Invariant failed: Draggable[id: 1]: Unable to find drag handle

我尝试使用resetServerContext()重置服务器上下文计数器，但它没有按预期工作。

我有一个全新的 angular 通用项目，它似乎伪装了所有的 HTML（这很好）。但是，我正在尝试对我的 .NET 服务器进行 API 调用，该服务器是使用 weatherforecast API 构建的标准 API。

API 调用并且效果很好，但只有在我的 Web 应用程序从预渲染切换到 csr 后才会发生。参见示例 1。

示例 1

如果我在页面上禁用 javascript，这就是我得到的

这是 HTML 代码

  <div style="padding: 5rem">
    <h1>TEST</h1>
    <h2>{{ this.SampleMessage }}</h2>
    <div *ngFor="let product of weather$ | async">
      <p>{{ this.product.summary }}</p>
    </div>
  </div>

app.component.ts

import { AppService } from './app.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title …

在 sveltekit 的上下文中，我需要一些帮助来理解 SSR。我注意到该load方法在服务器和客户端上都被调用，我无法解决这个问题。我想它需要初始化客户端组件的状态，但为什么不将 SSR 产生的 props 传递给客户端呢？

如果在 SSR 期间需要做数据库请求怎么办？现在从客户端重复相同的数据库请求？如果这甚至不可能怎么办？我知道我可以使用browserfrom$app/env在服务器和浏览器上运行不同的代码，但我返回什么道具？有没有办法将数据从服务器端调用load传递到客户端调用？