标签: server-side-rendering

当 Nuxt 的 SSR 遇到错误时，你如何处理错误？

目前我正在使用error()处理程序，但它在生产中不起作用？这是我的 Nuxt 应用程序的示例。

异步数据

 async asyncData({ store, route, error }) {
    return store.dispatch( NAMESPACES.USERS + ACTIONS.GET_DETAIL, userId ).then(response => ({
      data: response,
    })).catch((e) => {
      error(e)
    })
  } 

错误.vue

  <vis-container>
    <vis-row class="error">
      <vis-col md="8" class="error__component">
        <component :is="errorPage" :error="error.statusCode" />
      </vis-col>

      <vis-col md="8" class="error__contact">
        <p class="error__contact__title">{{ $t('error_page.question') }}</p>
      </vis-col>
    </vis-row>
  </vis-container>
</template>

<script>
export default {
  props: ['error'],
components: {
    NotFound: () => import('@/components/error/NotFound'),
    InternalServerError: () => import('@/components/error/InternalServerError'),
  },
    computed: {
    errorPage() {
      if …

如何使用 SSR 在 nuxt.js (Vue.js) 中向网站添加跟踪代码？

Naver 分析跟踪代码示例：

<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "123456789abcd";
wcs_do();
</script>

我试过：nuxt.config.js

script: [{ src: '//wcs.naver.net/wcslog.js' }]
...
{src: '~plugins/naver-analytics.js', ssr: false}

插件/naver-analytics.js

export default ({ app }) => {
  if(!wcs_add) var wcs_add = {};
  wcs_add["wa"] = "123456789";
  wcs_do();
  wcs.event('create', '123456789', 'auto')
  app.router.afterEach((to, from) => {
    wcs.event('set', 'page', to.fullPath)
    wcs.event('send', 'pageview')
  })
}

但是，当然，没有任何作用。

我使用 NextJS 作为客户端存储库来与我的后端 API 服务器 (laravel) 通信。身份验证是通过存储在 cookie 中的 JWT 完成的。当我向 发送身份验证请求时https://my-backend-server.com/api/login，这一切都可以无缝运行，因为我用 cookie 进行响应，并设置为 my-backend-server.com 域。甚至当我从浏览器发送请求时。

当我想加载页面并从 getInitialProps 发送请求时出现问题，因为这是一个服务器端调用。我如何能够访问 cookiemy-backend-server.com并将其放入标头中，以便正确授权来自 NextJS 的服务器端请求？

大多数答案都说了一些关于req.cookiesor 的内容req.headers.cookies，但是这是空的，因为 getInitialProps 中的请求是http://my-local-clientside-site.com

我正在尝试styled-components使用 Nextjs 在 React 项目中实现。问题是，虽然我可以实现并看到样式，但是当我在浏览器上看到它时会有一点延迟。首先加载没有样式的组件，22 毫秒后应用样式。我做错了什么？谢谢

这是我的代码！

页面/index.js

import React from "react";
import Home from "../components/home/index";


const index = () => {
  return (
    <React.Fragment>
        <Home />
    </React.Fragment>
  );
};

export default index;

组件/home.js

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

const Title = styled.h1`
  color: red;
`;

function Home() {
  return (
    <div>
      <Title>My First Next.js Page</Title>
    </div>
  );
}

export default Home;

babel.rc

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

页面/_document.js

import …

我的无服务器 Web 应用程序托管在 AWS Amplify 上。如果我尝试刷新页面，我会收到拒绝访问错误 XML。当我查看控制台时，它没有显示任何输出。该代码在 上运行良好localhost，但会导致 403 错误。

我发现了一个非常相似的问题，只是我没有使用 CloudFront。

我怎样才能找到这个问题的潜在原因？

更新

我解决了这个问题，并在答案部分发布了答案。但是，我现在有了这个问题的第 2 部分。

如何让客户端可以像这样直接调用我的 URL：

https://URL.com/listing/LISTING_ID

现在，如果我尝试在传递LISTING_ID页面错误时直接调用它。这与 Isomorphic ReactJs 有什么关系吗？

我曾尝试使用 Digital Ocean 而不是 AWS 作为我的网络托管服务。发生同样的错误。

Ezoic 为网络发布商提供了针对其广告、内容、布局等的自动化网站智能。

Ezoic 只能由 Cloudflare 或名称服务器集成 - https://support.ezoic.com/support/solutions/articles/48000453862-how-can-i-integrate-my-site-with-ezoic-

ezoic 服务器正在用广告脚本替换广告占位符。

例子：

<span id="ezoic-pub-ad-placeholder-100"></span> ---> ad script

问题是我如何将它与 NuxtJS 和 Vue 连接起来。水合后，广告脚本被删除并替换为占位符。我可以告诉 Vue - 不要重新渲染那段代码吗？

组件代码：

<template>
    <div class="google-ads" :class="`google-ads--${type}`">
        <template v-if="type === 'top'">
            <!-- Ezoic - standard - top_of_page -->
            <div id="ezoic-pub-ad-placeholder-102"></div>
            <!-- End Ezoic - standard - top_of_page -->
        </template>
    </div>
</template>

更新到 angular 9 和 Universal 9 后，运行时出错 npm run build:ssr && npm run serve:ssr

Error: Component 'HeaderComponent' is not resolved:
 - templateUrl: ./header.component.html
 - styleUrls: ["./header.component.scss"]
Did you run and wait for 'resolveComponentResources()'?
    at Function.get (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26828:31)
    at getComponentDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:2021:20)
    at verifyDeclarationsHaveDefinitions (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26519:23)
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26494:22)
    at D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26491:13
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26489:64)
    at D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26491:13
    at Array.forEach (<anonymous>)

包.json

"scripts": {
    "ng": "ng",
    "start": "npm-run-all -p client server",
    "client": "ng serve --proxy-config server.conf.json",
    "server": "nodemon --watch server.ts …

我有一个旧版本的静态文件夹nextjs。我更新了我nextjs的使用public文件夹。

"next": "^9.4.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",

这是我的nextjs配置：

const withPlugins = require('next-compose-plugins');
const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
require('dotenv').config();
const withSourceMaps = require('@zeit/next-source-maps')();

if (typeof require !== 'undefined') {
  // eslint-disable-next-line no-unused-vars
  require.extensions['.css'] = file => {};
}

const nextConfig = {
  env: {
    BUILD_ENV: process.env.BUILD_ENV,
  },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // eslint-disable-next-line no-param-reassign
      config.resolve.alias['@sentry/node'] = '@sentry/browser';
    }

    if (isServer) …

我在 SSR 上运行的异步管道有问题。没有错误，只有无限循环（似乎服务器正在等待 observable 被解析）。

我在用：

1. @nestjs/ng-universal
2. 角 9
3. 火力基地
4. 接收器

像这样的简单案例有效：

<p>{{ observable | async }}</p>

但是使用结构指令不起作用：

如果

<p *ngIf="(observable$ | async) > 5">{{ observable$ | async }}</p>

恩福

<p *ngFor="let item of items | async">{{ item }}</p>

使用 async 是一个很好的做法，因为它会避免手动取消订阅以避免组件销毁时内存泄漏。但是，使用手动取消订阅有效。

更新 08/06/2020

当我在http://localhost:4200之后添加 index.html 时，应用程序会加载

异步在模板中是这样的：

<ng-container *ngIf="currentUser$ | async; else loadingUser">

并且 currentUser$ 是在ngOnInit组件的方法中设置的：

  ngOnInit(): void {
    this.currentUser$ = this.authService.currentUser$;
  }

更新 16/06/2020

当我们在组件中删除所有 OnPush 检测策略的使用时，即使在结构指令中使用异步，SSR 模式也能工作。

所以这似乎表明在结构指令中使用带有异步的 OnPush TOGETHER 在 SSR 模式下不起作用。 …

我的其中一个页面有一个非常大的包大小。

如何改进 Next.js 中页面的首次加载？

请看一下截图：