标签: server-side-rendering
无法在 AWS amplify 上部署 Next Js SSR 应用程序。（网站出现内部错误，cli 部署失败）
我用
\n- \n
- 命令行方式 \n
- 和GUI方法（来自AWS网站） \n
当我使用 CLI 方法时\nit 说：
\n Zipping artifacts completed.\n\xe2\xa0\xa6 Deploying build artifacts to the Amplify Console..Job failed.{"jobArn":"arn:aws:amplify:eu-central-1:-----:apps/------","jobId":"1","commitId":null,"commitMessage":"Deployment failed","commitTime":null,"startTime":"2021-06-28T12:16:39.969Z","status":"FAILED","endTime":null,"jobType":null}\n\xe2\x9c\x94 Deployment complete!\n当我使用 AWS 网站\n然后它进行构建，之后，它会给出类似的错误
\n- \n
- 开始SSR构建... \n
- 内部错误 ... \n
- 终止日志记录... \n
reactjs server-side-rendering next.js aws-amplify aws-amplify-cli
推荐指数
解决办法
查看次数
如何将 Pinia 与 Nuxt、composition-api (vue2) 和 SSR 结合使用？
我正在尝试让 Pinia 在 Nuxt 中使用 SSR（服务器端渲染）工作。
当创建没有Pinia 的页面时，它可以工作：
<script>
import { reactive, useFetch, useContext } from '@nuxtjs/composition-api'
export default {
setup() {
const { $axios } = useContext()
const invitesStore = reactive({
invites: [],
loading: true,
})
useFetch(async () => {
invitesStore.loading = true
await $axios.$get('invite/registermember').then((result) => {
invitesStore.loading = false
invitesStore.invites = result.invites
})
})
return {
invitesStore,
}
},
}
</script>
但是在介绍Pinia时，我得到了错误"Converting circular structure to JSON --> starting at object with constructor 'VueRouter'"
我这样使用 Pinia：
// …推荐指数
解决办法
查看次数
SvelteKit 渲染随机 Prop 在服务器和客户端之间是不同的
我想在 SvelteKit 中制作一个具有随机参数的组件。问题在于，当页面在服务器端呈现时和页面变得水合时，此参数采用的值是不同的。
例如，考虑这个组件：
<script>
export let t = Math.random() * 90
export let l = Math.random() * 90
</script>
<div class="box" style="--t: {t}vh; --l: {l}vw;"></div>
<style>
.box {
position: fixed;
top: var(--t); left: var(--l);
width: 10vw; height: 10vh;
background-color: black;
transition: all 1s;
}
</style>
当页面在服务器上呈现时，t并l采用一些随机值，并将结果作为 HTML 返回到浏览器。然而，一旦页面变得水合，t就会l呈现不同的值。结果，盒子移动了。
我不想让盒子移动；相反，我希望客户端也使用服务器返回的随机值，这样就不会出现样式改变的情况。如果页面是通过页内路由器导航的，那么一切都很好；当页面由服务器渲染时，该框才会移动。
如果我导出一个函数，结果是一样的load。SvelteKit 有没有办法让服务器和客户端就随机值达成一致？
推荐指数
解决办法
查看次数
Svelte 可以像 Handlebars 一样用于模板吗？
我的目标是让最终用户在我的应用程序中构建一些自定义功能。我可以做这样的事情吗？我知道这有时也称为液体模板，类似于handlebars.js 的工作原理。
应用程序.svelte
<script>
let name = 'world';
const template = '<h1> Hello {name} </h1>'
</script>
{@html template}
如果这个问题已经得到解答，我很抱歉，但我找不到它。
推荐指数
解决办法
查看次数
nuxt 构建与生成
我不确定什么时候用什么。
你得到nuxt build两个目录（client＆server）这意味着你实际上正在部署node.js服务器（即express，对吧？）
与nuxt generate你一起得到.html
看来这两种方式都可以实现 nuxt 所追求的良好 SEO。对我来说，nuxt generate选项似乎更简洁，因为它不涉及服务器。
我在这里缺少什么？为什么我应该使用nuxt build并混淆服务器代码？
推荐指数
解决办法
查看次数
如何为 getServerSideProps 启用缓存？
我们有很少的页面和组件作为服务器端渲染。
我们尝试对少数 API 响应使用缓存。
export async function getServerSideProps(context) {
const res = await getRequest(API.home)
return {
props: {
"home": res?.data?.result
},
}
}
Next.js 版本是 11.1。
有人可以建议我们如何实现缓存吗？
推荐指数
解决办法
查看次数
使用 swiper css SSR 时 swiper 失败
我尝试将 swiper (6.8.4) 与 SSR 一起使用，但使用 CSS 构建会出现以下问题：
ReferenceError：文档未定义
如果没有 swiper CSS，构建会成功，但所有 swiper 功能都不起作用......
这是我的代码：
import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y } from 'swiper'
// swiper bundle styles
import 'swiper/swiper-bundle.min.css'
// swiper core styles
import 'swiper/swiper.min.css'
// modules styles
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'
// install Swiper modules
SwiperCore.use([Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y])
const Carousel = ({ data, renderSlide }) => {
return ( …推荐指数
解决办法
查看次数
如何将 Express.js 和 Vanilla JS/HTML 文件夹结构与 Vite.js 结合使用？
我正在尝试使用 Express.js 和 Vanilla HTML 和 JS 项目设置服务器端渲染，但我不知道如何操作，这是我的文件夹结构。我想通过运行 Express 服务器来查看我的 home.html 页面。
\nTest App\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 html\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 home.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 server.js\n这是我尝试过的：
\nindex.html
//... Default stuff\n <body>\n <div id="app"></div>\n <script type="module" src="/app/main.js"></script>\n </body>\n//...\nserver.js
const fs = require("fs");\nconst path = require("path");\nconst express = require("express");\nconst { createServer: createViteServer } = require("vite");\nconst port = 3000;\n\nasync function createServer() {\n const app = express();\n\n const vite = await createViteServer({\n server: { middlewareMode: "ssr" },\n …推荐指数
解决办法
查看次数
Nuxtjs3支持NuxtServerInit吗
我使用 Pinia 在 Nuxtjs 3 中创建数据。它工作正常，但我想检查数据是否通过服务器而不仅仅是客户端呈现。我如何确定这一点？新版本的 Nuxtjs 3 是否支持 nuxtServerInit？
推荐指数
解决办法
查看次数
NuxtLink 的子级渲染两次（水合错误？）
我的预感是存在一些水合不匹配，其中FontAwesomeIcon未在服务器上渲染（仅span），然后在客户端上NuxtLink渲染 的两个子节点（svg和span），提示 Nuxt 渲染span两次。
但控制台不会返回错误。
关于如何调试这个有什么想法吗？
这是 Vue 组件：
<template>
<ul v-if="routes.length > 0" class="col-span-2 flex flex-col">
<li v-for="(item, i) in routes" :key="item.name">
<NuxtLink :to="item.path" target="_blank">
<FontAwesomeIcon :icon="item.icon" class="mr-3" fixed-width />
<span>{{ item.title }}</span>
</NuxtLink>
</li>
</ul>
</template>
<script lang="ts">
export default defineComponent({
props: {
links: {
type: Array,
default: () => ["instagram", "facebook", "email"],
},
},
computed: {
routes() {
return [
{
name: "instagram",
path: "https://www.instagram.com/insta.name/", …推荐指数
解决办法
查看次数