Can server-side rendering be implemented for a specific page in Nuxt?
This is my desired outcome
Server-Side Rendered Page: www.example.com/foo
Client-Side Rendered Page: www.example.com/bar
Can server-side rendering be implemented for a specific page in Nuxt?
This is my desired outcome
Server-Side Rendered Page: www.example.com/foo
Client-Side Rendered Page: www.example.com/bar
Check out my answer on this topic. In Nuxt3, you can still use the exclude key to achieve a mix of SSG and SPA.
For example, have some pages as static (/) and others as dynamic (/about).
/pages/index.vue
<template>
<div>
This is the default index page, visible without JS
</div>
</template>
/pages/about.vue
<template>
<div>
The about page is only accessible with JS enabled
</div>
</template>
nuxt.config.js
export default defineNuxtConfig({
ssr: true,
generate: {
exclude: [
/^\/about/
]
}
})
You can test this by disabling JS in your browser's devtools or inspecting the source code to see that the /about page lacks statically generated content (meaning it requires JS).
There are plans for a syntax like the one mentioned here:
export default defineNuxtConfig({
routes: {
'/': { prerender: true },
'/blog/*': { static: true },
'/stats/*': { swr: '10 min' },
'/admin/*': { ssr: false },
'/react/*': { redirect: '/vue' },
}
})
However, these features are still in development. For now, I recommend sticking to the current method of achieving this functionality.
Currently, I am attempting to extract attributes from specific selection tags using the following code: $('tagName').swapper(); Each section contains data-image="source". My objective is to retrieve each of these attributes and arrange them int ...
I am working with two textboxes <input id='random_value' name='random_name' value='First' <input id='random_value' name='random_name' value='' My challenge is to replace the value of a tex ...
I have a couple of questions: Is it possible to just use cors() once in my server.js instead of having to call and use it in every router file? Can I simply require express once in my server.js without having to call it in all my router files? Currently, ...
Attempting to save images stored in a web-space account can be challenging. Accessing the private space with credentials and retrieving the image link using Puppeteer works smoothly. However, when the src attribute of the image includes additional authenti ...
I'm reaching out again because I'm struggling to figure out what I'm doing wrong. I followed a tutorial step by step but the code isn't working as expected. My goal is to toggle between marking tasks as done and not done. When I test th ...
I am having trouble uploading a FilePond file field to the server along with other form elements. My form consists of input fields, a select field, a textarea, and a file input field connected to the Filepond plugin. <form class="uploadform"& ...
I need to store the text input from the 'txtDATE' textbox in a variable called press_date. The current AJAX post function is working fine, but I need to make the value dynamic instead of static. I've spent all day searching for solutions and ...
My error reporting system is detecting issues with JS Web Storage failures specifically on Android devices using Chrome mobile. Interestingly, I have not been able to replicate this error on my own Android device. The error message that keeps popping up i ...
I am developing a web application that functions as an extensive form which will later be converted into a PDF document. Upon submission of the form, all input data is sent to a PHP file where they are stored as variables to be included in the PDF. Some of ...
When I use the following command, I push a query to the router: this.$router.push({ query: { queryKey: ["a", "b", "c"] } }); Every click on an element adds a new value to the array. So, the first query is "a", then ["a", "b"], and finally ["a", "b", "c"] ...
After an exhaustive search, I have yet to find a solution to my problem. I am attempting to send a message from the server every time it detects a file change in a specific directory. However, instead of sending just one message, it sends the same message ...
Having an issue with my sailsJS server. I am attempting to send a post request from a client on a different domain. I am sending _csrf from /csrfToken, but encountering a 403 csrf mismatch repeatedly. The client-side code appears as follows: $.ajax( ...
On our company website, we have a wide array of vehicles available for purchase. Among these vehicles, there is a specific group of vans with detailed information such as the model and value. {vanNumber: "7654628", vanDescription: "VW Campervan", value: { ...
It feels like I'm spending too much time on this. I've been trying to format the momento().toDate() in pt format but no luck so far. I've already added it to my react code import 'moment/locale/pt'; import moment from 'momen ...
Having trouble with the previous question, so I'll provide more detail here. Below is my index.php file where I explain the method used to save data to a database. <html> <head> <script> function updategroup() { var update_c ...
I followed the instructions in the Vue project documentation to install font-awesome, but encountered an error: https://i.sstatic.net/c6rAW.png Initially, I used the following commands for installation: $ npm i --save @fortawesome/fontawesome-svg-core $ n ...
I've run into some issues with AngularJS, even though I have imported all the necessary libraries. Specifically, I am encountering the following errors: Uncaught TypeError: angular.service is not a function at taskService.js:2 taskFactory. ...
Currently, I am developing a web application using express and one of the functionalities is exposed through an API with an endpoint on 'api/tone'. This API acts as a wrapper for one of Watson's services but I choose not to call them directl ...
Hey there, total newbie to coding here. I'm working on a simple to do list project. The adding function is working great, and here's the code for it: let salvar = document.getElementById("salvar") let remove = document.getElementById("remove ...
Looking for help with my web page. I have a table that needs to be populated using AJAX calls to the server-side method. I've implemented jQuery DataTables, and here's the code snippet: $(document).ready(function() { $("#tableUserList").DataTa ...