I want to prerender a static site being created with NextJs. After doing next build && next export, I have the site prerendered.
But it still loads a lot of small scripts at the client side.
I didnt see an option to do genration without hydration in next.config.js (similar to svelte kit)
Is it possible to generate pure html pages.
Related
I have created the build by npm run build and hosted the build folder on a server.
My problem is that I can see the static files by their paths. Eg - https://[mydomain.com]/static/js/11.ba24d9f9.chunk.js2
While if this file doesn't exist(hit a random url on this domain, eg - https://[mydomain.com]/abaknan),
it will render my 404Component because of react-router * entry.
Is it possible to block this chunk route and show 404component ?
React is a Javascript library for UI rendering on the client-side. So, it requires all the compiled JS loaded into the document in order to render the components.
If you are using any sensitive information on your page. Please secure those in your backend application.
The compiled JS chunk files are necessary to render the page. So, they must be accessible from wherever you're requesting the page. Other endpoints return your custom 404 page because the file wasn't found by React Router. Blocking chunk routes is not possible from your UI framework, you will need to add those rules on your server.
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
We have a SPA built with React and bundled with Webpack.
The server only has the index.html and javascript bundle files located.
Behaviour Chrome/Firefox/Opera
Loads index.html
Fetches bundles
Boots React page
Behaviour Edge
Loads index.html
Fetches bundles
Boots React page
Starts loading every module and component as an independent file using HTTP requests (they are not even on the server, the response is index.html)
The bundle does not have this information. This information must be fetched from the source map. But why does Edge do this?
This is similar like SAP application, those JavaScript library has their own logic to preload source codes to optimize the performance/network requests. It's a compatibility issue with React library for Edge browser.
The next version of Edge browser don't have this issue. Maybe you want to try this: https://www.microsoftedgeinsider.com/en-us/
I have a react application build with create-react-app. Its using octoberCMS as the backend fetching data using Axios calls from the frontend. Till now I was developing keeping the build content of react inside a directory named 'react' in the root directory of octoberCMS installation. Hence the URL I was hitting was http://example.com/react/.
The problem is now I am done with the development phase and look forward to deployment. But I want my front-end to be served at http://example.com and backend to be served at http://example.com/backend (backend served as I want). How can I achieve this? I am fairly new to both frameworks.
I have tried keeping the build content along with the rest of the octoberCMS
First build your react app that will give you vendor.js[third party scripts] and your app.js[your actual app]
put them in to theme directory assets something
Then In Ocotber CMS make page with URL /:url? and paste your index.html content there.
it will be your root div and including js html, change path for js which points to the build js which you put in theme directory.
now what happens when anybody come to site
- we are serving same content as we do in dev build
- index.html with root tag and needed js
Now if use hit any other url like https://www.example.com/test/etc it also will be catch by /:url? (and all other requests) and home page served and our react app will work as we needed.
if any questions please comment.
Situation:
I'm building a React app with React Router.
It was generated from create-react-app.
I need to host it statically.
If I visit the home page first and then click around, everything works fine.
Problem:
When visiting a sub page directly such as https://www.example.com/path/page server returns 404 error because /path/page is not a valid directory on the server.
For as far as I can tell, the server is just serving up files statically, and I cannot change how the server is written (I know I could solve this problem by routing all accesses to the react app with some server code, but this is not an option).
How can I make all urls directly visitable by only changing code in my react app?
After some research, I figured out that what I needed was a static site generator.
There are a couple of options available that works with React.js
React Static
Gatsby
Next JS
Some useful articles on getting started:
For Gatsby: https://medium.com/codingthesmartway-com-blog/gatsby-static-site-generator-for-react-introduction-b9fce7df6b24
For React Static: https://medium.com/#tannerlinsley/%EF%B8%8F-introducing-react-static-a-progressive-static-site-framework-for-react-3470d2a51ebc