Creating a Server-Side Rendered application from scratch

Currently, we are in the process of developing a Nuxt application using npm run generate and deploying it as a Static Site Generator (SSG). However, an issue has arisen where the application is being built as a Client-Side Rendered (CSR) app instead of Server-Side Rendered (SSR). Upon inspecting the page source, we only observe 

<div id="__nuxt"><div class="document-driven-page"><!----></div></div>
within the body tag, without any scripts.

You can view the deployed site here:

The root cause of this problem might be associated with the v-if="isPageReady" condition in default.vue. Unconditionally removing this condition leads to another issue outlined here.

Your script code goes here...

We aim to convert the application to SSR mode and determine a method to avoid displaying the incompletely constructed HTML. Any suggestions or assistance on this matter would be highly valued.

For reference, you can access the Reproduction Repository at: https://github.com/newyee/nuxt-site

javascriptvue.jsnuxt.jsnuxtjs3static-site-generation

Answer №1

To create an SSR application using yarn generate is not possible. You must ensure that you have

ssr: true

configured in your nuxt.config.ts file, then proceed to build your application using

yarn build

Once the build process is complete, you can preview the outcome using

yarn preview

It's important to note that by following this method, you will require node for deploying your application, whereas with generate and ssr: false, simply having an FTP would suffice.

For more information, visit: https://nuxt.com/docs/guide/concepts/rendering

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use jQuery's $.post method to validate the form field and prevent submission if there are any errors

I am trying to validate a form field on submit and block the submission if an ajax response message is returned. Below is the JS code I have: $('form.p_form').submit(function (){ var description = $.trim($('#f9').val()); var aa = $.pos ...

javascriptphpjqueryajaxforms

Tips for ensuring v-tabs-items and v-tab-item fill height

I found an example that I am trying to follow at the following link: https://vuetifyjs.com/en/components/tabs#content <v-tabs-items v-model="model"> <v-tab-item v-for="i in 3" :key="i" :value="`tab-${i}`" > < ...

cssvue.jsvuetify.js

Tips on passing methods to form provider with unique name for managing nested forms

As discussed in #60277873, when creating nested forms, it is necessary to rename the methods of the nested form as follows: const { register, formState: { errors }, handleSubmit, } = useForm({ mode: "onBlur", }); This code sh ...

javascriptreactjsreact-hook-form

The component contains a render method, however, it does not inherit from React.Component

A component is displaying a render method, however it does not extend React.Component. This may lead to potential errors. Please modify <Test> to extend React.Component instead. When utilizing the extends-classes library, it results in a react compo ...

javascriptreactjs

Setting the focus on an input when updating a property in the Pinia store using Vue

When a component I have is clicked, it triggers a function in the store: <button @click="this.store.foo()"></button> Within the store, I am updating a specific property: state: () => ({ focusIn: false, }), actions: { foo() { ...

javascriptvue.jsfocusstorepinia

using jquery, how can you send multiple parameters in an ajax request

Hello and welcome! I'm having trouble passing parameters through an ajax URL. I am attempting to send multiple data using the jQuery $.ajax method to my PHP script, but I can only pass a single data item when concatenating multiple data entries toget ...

javascriptphpjquerycssajax

Has anybody successfully implemented the danfojs-node package on an Apple M1 chip?

I encountered an issue when trying to use danfojs-node on a Mac with an M1 chip - it kept crashing due to TensorFlow. I'm curious if anyone has managed to successfully integrate the npm package from this link (https://www.npmjs.com/package/danfojs-nod ...

javascriptnode.jstensorflowmachine-learningnpm

My webpage layout doesn't quite accommodate my content, so I need to adjust it to be more zoom

Why does the page container load bigger than the html/body container in mobile mode, as shown in the photo? Here is my CSS: html { margin-top: 48px; width: 100%; } body { margin: 0; width: 100%; background: var(--bgGray); font-family: Ub ...

javascripthtmlcssreactjs

Place an overlay element in the top-left corner of a perfectly centered image

Currently, there is an image that is centered on the screen using flexbox: .center-flex { display: flex; justify-content: center; } <div class="center-flex"> <img id="revealImage"> </div> An attempt is be ...

javascripthtmlcss

Animate the parent container of ng-view in Angular by targeting an element within ng-view

Are you able to use CSS animations to animate a div's background color that is located outside of the ng-view, while using a directive on a $state within the ng-view? The ng-view already has CSS animations for routing. When I try to add animation cl ...

javascriptangularjsangularjs-directiveangular-ui-routercss-animations

Initiate the setInterval function upon clicking the button

Is there a way to successfully start setInterval when the user presses a button with ID #begin? I have attempted various methods, but they all seem to prevent setInterval from working at all. Any suggestions on how to make this work correctly? Thank you! ...

javascriptjquerysetinterval

I am looking to integrate a custom button that, when clicked, will launch the file explorer for me to choose a file. Once selected, the file name should automatically populate in the input field

In the code below, when the button is clicked, Windows Explorer should open and allow the user to select a file. The selected file should then be displayed in the input field. The file type should not be 'File'. <Grid.Column width={8}> ...

javascriptreactjsnext.js

The module './installers/setupEvents' could not be located within Electron-Winstaller

After encountering an error while attempting to package my Angular app on Windows 10, I'm looking for help in resolving the issue: https://i.stack.imgur.com/yByZf.jpg The command I am using is: "package-win": "electron-packager . qlocktwo-app --ove ...

javascriptangulartypescriptelectron

Keep an eye on the syncing progress of pouchdb replication

What is the best way to alert the user if there is a loss of Internet connection or if the server goes offline, causing live sync to stop? var localdb = new PouchDB('localdb'); var remotedb = new PouchDB('http://localhost:5984/xyz&a ...

javascriptpouchdb

Getting the value from a .sh (Shell Script) file in React: How to do it?

There is a .sh file that contains the following code: echo "Hello" This code produces the output: Hello The question at hand is: I am trying to extract the output from the .sh file and integrate it into my React application. After exploring various ...

javascriptnode.jsreactjssh

Unable to use document.write when extracting code from the internet

I am currently developing a game using emulatorjs and ruffle. The goal is to have it all contained in a single downloadable file that can be run locally. I attempted to create another file for auto-updating purposes, but encountered issues with some of the ...

javascripthtml

Techniques on enforcing numerical input exclusively in the <vue-numeric> component

With my custom <vue-numeric> <vue-numeric currency="RMB" separator="," v-bind:minus="false" v-model="amount" v-bind:precision="2" class="form-control form-control-lg bg-secondary border-0 text-white" >&l ...

vue.jsbootstrap-4

Tips for dividing an array based on a defined regex pattern in JavaScript

I want to split a string of text into an array of sentences while preserving the punctuation marks. var text = 'This is the first sentence. This is another sentence! This is a question?' var splitText = text.split(/\b(?<=[.!?])/); split ...

javascriptarraysregex

Obtain the output of a single controller in a different controller within the Express framework

Seeking to invoke a function from one controller in another Controller1.js 2) Controller2.js Code within Controller1.js file: var Controller2= require('../controllers/Controller2.js'); exports.getlist = function (req, res, next) { Control ...

javascriptnode.jsexpress

Ways to extract the value from a jQuery object

How can I retrieve the selected time value using a jQuery plugin and save it on a specific input element within the page? Refer to the plugin and code provided below: http://jsfiddle.net/weareoutman/YkvK9/ var input = $('#input-a'); input.cloc ...

javascriptjquery