标签: server-side-rendering

我在我的角度应用程序中实现 SSR，在尝试运行npm run build:ssr它时会抛出以下错误。

我已经创建了自己的库，它是否以名称捆绑在 dist 文件夹中@asfc/shared

ERROR in projects/asfc-web/src/environments/environment.ts:1:39 - error TS2307: Cannot find module '@asfc/shared' or its corresponding type declarations.\n\n1 import { PageNotFoundComponent } from '@asfc/shared';\n                                        ~~~~~~~~~~~~~~\n......\n

我已将 index.ts 添加到files，但错误仍然没有消失

下面是我的，tsconfig.server.json

{\n  "compilerOptions": {\n    "target": "es2016",\n    "module": "commonjs",\n    "moduleResolution": "node",\n    "allowSyntheticDefaultImports": true,\n    "removeComments": false,\n    "strict": false,\n    "noFallthroughCasesInSwitch": true,\n    "noImplicitReturns": true,\n    "noImplicitAny": false,\n    "noUnusedLocals": false,\n    "noUnusedParameters": false,\n    "experimentalDecorators": true,\n    "pretty": true,\n    "declaration": true,\n    "outDir": "../../dist/server",\n    "lib": ["es2016", "DOM"],\n …

我正在尝试使用 预渲染我的角度应用程序ng run [myAppName]:prerender。我只想预渲染 的内容，/因为其他路由不需要预渲染。尽管它找到了一种方法来预渲染我的 angular.json 配置中未包含的其他路由。

Angular.json

    "prerender": {
      "builder": "@nguniversal/builders:prerender",
      "options": {
        "browserTarget": "[myApp]:build:production",
        "serverTarget": "[myApp]:server:production",
        "routes": [
          "/" // <--- One route listed...
        ]
      },
      "configurations": {
        "production": {}
      }
    }

使用上面的配置，它仍然会预渲染 16 个其他路由（例如 /my-other-route）

有没有办法只能预渲染页面/？

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.10
@angular-devkit/build-angular     0.901.10
@angular-devkit/build-optimizer   0.901.10
@angular-devkit/build-webpack     0.901.10
@angular-devkit/core              9.1.10
@angular-devkit/schematics        9.1.10
@angular/cdk                      9.2.4
@angular/cli                      9.1.10
@angular/fire                     6.0.2
@angular/google-maps              10.0.2
@angular/material                 9.2.4
@angular/platform-server          9.1.12
@ngtools/webpack                  9.1.10
@nguniversal/builders             9.1.1
@nguniversal/common               9.1.1
@nguniversal/express-engine       9.1.1 …

据我了解，当访问 NextJs 页面时，服务器（SSR）会渲染并发送 HTML 以及必要的 javascript，以在客户端水合页面。这使得页面 SEO 友好。

但是，当我们更改路线（例如“/about”）时，它实际上并不发送 HTML 文件，而只是发送 about.js （内容类型：application/javascript）文件（查看文件，它看起来像 React VirtualDOM，但我不确定）。这被绘制在 DOM 上，我们看到关于页面。

那么，我的问题是——

1. 这是关于页面 SEO 友好的吗？（因为它不是 HTML 文件）
2. 如果不是，那么是否意味着只有初始页面有利于 SEO 而不是后续路线？

您好，我正在使用 nextjs 13 服务器组件，使用 /app 目录和 sanity studio。我的代码看起来像这样

const Page = async () => {
  const query = groq`*[_type == "university"]`;

  const data = await sanityClient.fetch(query);
}

每次我在 vercel 上重新部署网站时，我的内容都会在前端加载最新更新的数据。但如果我在 sanity studio 上更改某些内容并刷新我的页面，我只会看到旧的更改。这里有什么帮助吗？谢谢

我正在使用gatsby-plugin-styled-components来设计下面的元素.

import React from 'react';
import styled from 'styled-components';


const secondChar = styled.span`
  font-size: 3em;
  color: azure;
`

const TitleWrapper = styled.div`
  font-size: 3.5em;
  font-weight: 100;
  letter-spacing: 0.01em;
  font-family: 'Covered By Your Grace', cursive;
`

const Title = () => (
  <TitleWrapper>
    <span>a</span>
    <secondChar>b</secondChar>
    <span>c</span>
    <span>e</span>
    <span>f</span>
    <span>g</span>
    <span>h</span>
  </TitleWrapper>
)

export default Title;

由于某些原因,我只是无法弄清楚自己,我无法设置secondChar组件的样式.颜色和字体大小根本不会改变.但是,我可以通过Chrome Dev Tool设置secondChar的样式.

任何人都可以建议发生了什么？谢谢.

更新:解决了上面的第一个问题.忘了使用camelcase作为组件.

现在我正在尝试实现以下 Styled组件:引用其他组件

const SecondChar = styled.span`
  display: inline-block;
  transform: translateX(20px);
  transition: transform 500ms ease-in-out;
  ${TitleWrapper}:hover & {
    color: azure;
  }
` …

我知道这个问题已经被问过多次了，但是似乎没有一个解决方案。

我正在尝试使用仅在客户端在SSR应用程序中呈现的库'react-chat-popup'。（使用next.js框架构建）使用此库的正常方法是调用该库import {Chat} from 'react-chat-popup'，然后将其直接呈现为<Chat/>。

我为SSR应用找到的解决方案是在动态导入库之前检查方法中是否typedef of window !=== 'undefined'存在该componentDidMount方法，因为通常仅导入库通常已经引起了window is not defined错误。所以我找到了链接https://github.com/zeit/next.js/issues/2940，该链接建议以下内容：

Chat = dynamic(import('react-chat-popup').then(m => {
  const {Foo} = m;
  Foo.__webpackChunkName = m.__webpackChunkName;
  return Foo;
}));

但是，当我这样做时，我的foo对象将变为null。当我在回调中打印出m对象时，我得到{"__webpackChunkName":"react_chat_popup_6445a148970fe64a2d707d15c41abb03"}如何正确导入库并<Chat/>在这种情况下开始使用元素？

我已将我的应用程序从 angular 版本 5 更新到最新版本。这是详细信息：

  Angular CLI: 6.2.1
  Node: 8.12.0
  OS: win32 x64
  Angular: 6.1.6

我也使用 这个：ng-toolkit-universal 来实现服务器端渲染。我能够使用命令“ npm run build:prod ”构建应用程序，但在运行命令时面临以下问题：“n pm run server ”：

任何人都可以请帮助或建议一些相同的解决方案。

提前致谢！

我正在尝试构建 Nextjs 应用程序。我正在使用 GetInitialProps 通过 Firebase 函数执行 SSR。在 getInitialProps 中，我尝试执行 database.ref().child 并将值传递给 UI 。

如何在状态变量中设置更改后的值，以便随时更改 DB 中的值，它会反映在 UI 中。

目前正在返回 getInitialProps 中的值，并且它不反映 DB 值何时发生变化。尽管当我放置控制台记录器时，更改后的值会打印在服务器上。

代码 ：

static async getInitialProps({ req,query }) {

    var customer;

    database.ref().child('someKey').child)
    .on('value', function(snapshot) {
        console.log(snapshot.val());
        customer = snapshot.val();
        console.log(customer.name);
        this.setState({waitNum : customer.waitNum});
        return {customer};
    });

    console.log("Hi Here");
    return {customer};
}

我正在开发一个执行服务器端渲染的 Typescript 应用程序，但我无法理解ReactDomServer.renderToStringand的用法ReactDom.hydrate，特别是他们应该接收的参数类型。

我发现了几个示例（使用 JS）通过以下方式传递 JSX 标记作为参数：

ReactDomServer.renderToString(<ExampleComponent exampleProp="anyValue" />);

但是当我在 Typescript 上尝试这个时，我收到以下错误：

将 'RegExp' 类型转换为 'ExampleComponent' 类型可能是错误的，因为这两种类型与另一种类型都没有足够的重叠。如果这是故意的，请先将表达式转换为“未知”。

我让它工作的方式是调用React.createElement我的组件：

ReactDomServer.renderToString(
  React.createElement(ExampleComponent, {exampleProp: anyValue})
)

您是否必须调用React.createElement要渲染的组件（如果是，为什么）？还是我这边的错误/配置错误？

我将 Nuxt 更新到最新版本，因为他们引入了新的fetch()钩子。在我的项目中，我从 Prismic 检索数据。之前，我使用的是asyncData()，但是在导航时，需要一些时间才能渲染页面asyncData()（这就是它的工作原理）。

理想的解决方案是在该特定页面上导航，并在检索数据时显示加载动画。新的fetch()钩子看起来很合适，因为它暴露了$fetchState.pending以便检查操作的状态。

现在，代码（我正在从商店的类别中检索子类别）：

        data(){
            return{
                docs: []
            }
        },

        async fetch() {
            try{
                const res = await this.$prismic.api.query(this.$prismic.predicates.at('my.category.uid', this.$route.params.sub))
                const el = res.results[0]
                const query = await this.$prismic.api.query([this.$prismic.predicates.at('document.type','sub-category'), this.$prismic.predicates.at('my.sub-category.category', el.id)], { orderings: '[my.sub-category.position, my.sub-category.title]' })
                this.docs = query.results
            }   
            catch (e) {
                console.log(e)
            }
        }

这至少在客户端有效。这对于正确的 SSR 有效吗？我的意思是，在asyncData()（在服务器端调用）中，this是不可访问的，data(). asyncData()如果这是正确的解决方案，那么再使用又有什么用fetch()呢？