We have some medium website (> pages) and would like to prerender the entire site. Upon content changes in some external system, we would like to update only the specific page which contains the updated content and deploy the updated version of the page as static html page to some publishing service (webserver, CDN, Netlify, etc.).
I have seen that SvelteKit supports this SSG rendering approach through the adapter-static but as far as I've seen it always builds all the pages/routes for every build. This is currently a blocker because if an editor updates some content it takes more than 15 minutes (rough estimate if you have around 1500 pages) to see this update online.
Is there already some possibility to simply build some specific page or route?
Looks like that this is still an open feature request and to be discussed there: https://github.com/sveltejs/kit/issues/2369
Related
I have WordPress shared hosted server with Hostinger and wanted to deploy my react app there. I connected to the server with SFTP and copied and pasted the build folder's contents into public_html/test-gpu-app.
The app works, but I've experienced the strangest issue: when accessing the page, a blank page is displayed for 5 or so seconds, and full render takes nearly 8 seconds.
I've deployed the boilerplate react app to ensure it wasn't something I coded poorly/inefficiently, and it experiences the exact same issue. When deploying to Vercel, the app loads instantly, so it's clearly something to do with the server.
Server usage isn't anywhere close to maxed out, and every other page on the site loads quickly. I'm at a loss, can't figure out where to go from here.
The page:
https://artofpc.com/test-gpu-app/
GTMetrix test:
https://gtmetrix.com/reports/artofpc.com/e9IhhRzi/
Any help would be massively appreciated.
If you run the chrome performance profiler, you will see that the only function calls happening when the content loads are by a script called cmbv2.js, which appears to be a data tracking framework or something like that.
Your app code is downloaded only # 5 seconds or so, likely an arbitrary timeout by the lib. I'm guessing this is something like an analytics framework waiting to display content before JS initializes so that users don't see flashes of content. Do you have settings that automatically defer JS or anything like that by third party libs?
It reminds me of something like a layer that sits between HTML and the end user, auto deferring JS execution or something like that.
Be warned of this smell, future internet folks!
so I have this website made with Next and on a page there are some graphs (the graphs content changes as it fetches an API) and info.
I want to add a button to the page and when pressed it download the page as a HTML file and includes all the JS and CSS in the HTML file instead of separately, does anyone have any idea as to how to approach this problem. (The graphs content should be the same content as it was on the time of downloading)
(The reason why I want to do this is because I want to distribute these files to others and I want to allow them to read it w/o an internet connection)
You can't really download a React 'page' because there are no pages in React to download.
Next further complicates this because it server-side renders everything and rehydrates client-side. If you inspect one of your pages, you'll see the JSON blocks Next uses for data. Look for the __NEXT_DATA__ script (usually in the footer of your page).
I think the two strategies you could use:
Screen-capture of the graphs during your build sequence and push them over to an AWS S3 bucket or similar (cumbersome)
When I ran into a requirement like this, I just made the data for the graph available as a JSON download just below the graph and it satisfied the use case sufficiently.
If you just want to download the assets and take a look, a workaround is probably leveraging the next/export package. This allows you to run yarn build and generate a static export of your entire site. This should include the file you're looking for.
Just some ideas to think through.
I have a web application that has login and role-based contents etc. which is created in nuxt (framework for vue)using universal mode .currently it is SSR(server-side rendering) app but Is it correct if convert it into static site using nuxt generate command ?
FYI:- I have tried running nuxt generate , it generates appropriate pages inside dist but my concern is inside each HTML files, only CSS is there and script tag. I understand i cannot statically generate contents for each page since it's based on users.knowing that is it correct if I go with SSG or does it kills its purpose?
Avoid SSG for sites with content that changes often(dynamic) for logged in user.
Update:-
Lot of great sites out there for helping developers new to this, such as
https://jamstack.org/
https://explorers.netlify.com/
At the end, its way of generating html for each routes with contents at build time(some new methods also being worked on by netlify and vercel for improving build time for big jamstack sites) and once user visits home page, its html served and js kicks in and does SPA part for further navigation instead of full page refresh + interactivity
I have a website developed in AngularJS, and index.html serves the root of the application.
All the JS and CSS versions are maintained in the index.html itself, which means for any changes to reflect to the user, "index.html" is to be reloaded at the browser.(correct me if I am wrong here).
This is a problem, since there could be chances that the user has a tab opened of our website in his browser and we have published a new release. This release will not be published at user's browser till the time a "Manual refresh" is not triggered and "index.html" is not reloaded and hence bring up the possibility that the user will not be using our latest release.
We have written a framework to reload all resources once a release is detected by sending the latest version from web-server and comparing this with the current version in the browser and trigger a reload automatically. This fix works fine, but the problem again is, how to publish this release first time to all user's browser?
I hope you get my problem? let me know otherwise.
This is not possible. There is no way to force an open page to refresh if it does not already have code to implement that feature. You will have to wait until the user refreshes it themselves, and the browser cache expires, and any intermediate caches between the user and your servers.
I recommend searching to learn about "HTTP caching" if you are not already familiar, as well as "cache busting." In general, you may want to consider making index.html a small file that references your big files in <script> tags, setting the cache control for index.html very low, and use cache busting techniques on your big files.
But for your first release, there is no way to invalidate open tabs or existing caches. If this will cause a problem with your server, read up on "API versioning" for different ways to handle it.
Complete edit:
I have at the moment small page. I am not restricted to any blogger platform. Just several server restrictions, but some of them are fixed wit .htaccess. DataURI, CSS and sprites will be used to mitigate the connect time penalties.
Will creating AMP entry page (or few pages) be considered cheating, because mainly static HTML with adaptive/responsive CSS will be served and not AMP pages?
Will standalone pictures benefit from the advertised caching if they are referenced in source, but thumbnails are used to link to standalone pictures? Do I have to make gallery with full size pictures to force caching?
Is it worth to create small AMP subset just to advertise or wait to have large content pool and many visitors?
Just answer your question in title, yes you can have AMP and NON-AMP pages. You can see WordPress plugin here https://wordpress.org/plugins/amp/ , they are currently generating AMP page for each Blog Post in Single view, however any other custom post types like Pages, Archive pages, Category pages,front page are all non-AMP.