I'd like to use Next.js static site export, but I'd also like to have dynamic components within the templates so that a build wouldn't need to be done every time they change, for example, a 'navigation' component. From what I've read this doesn't seem possible? Are there any workarounds, aside from creating a separate client-side build step?
Next is working on allowing for a combined static + SSR generated site, but they're not there yet. I see a few options currently:
You can export a static site, but have that static site make api calls, etc. So you can load your navigation or whatever via api calls. Benefit - no new build. Drawback - those links/that markup is not available to search engines and won't appear initially for users.
If you're using a CMS and CI system (eg, WordPress for content, Travis for CI), you can set up webhooks or functions in WordPress to fire and trigger a rebuild & deploy in Travis when your content changes.
Go full SSR. It still delivers a fully rendered "static" page to the browser, it's just not a static HTML file at build time but one at run time. This is your best option if you need to have your dynamic content rendered immediately for the user and don't want to build with every change.
Related
I am developing an admin dashboard where I want to have a files navigation system that shall be always available from the main admin area and stay independently loaded from the main admin area.
What's the problem?
While interacting with the dashboard, since the approach is SSR with PHP, the user will be executing page requests to update a post, go to a different view, etc. So the files navigation area will have to be reloaded on every request and I don't want that, since the backend PHP will have to fetch all files and build the files tree over and over again for each request.
I though about doing the following:
The wrapper page (admin dashboard) contains two iframes in a split viewport:
iframe MAIN
iframe FILE-NAVIGATOR
The user can use and navigate on each side of the viewport without affecting the other area.
For example, navigate through files and folders without moving away from an open editor on the main iframe.
Or save the editor contents and go do something else without having to constantly refresh and re-render the files navigation area.
Both iframe contents will be hosted under the same domain, so communication between them won't be an issue.
I want to go the SSR route via PHP, since this project does not deserve the effort of building a modern SPA and I need to reuse a lot of already existing PHP code.
But still, I want to do it as good as possible.
So the question is:
Do you know if there is a cleaner/better way to achieve this, better than iframes?
I am a bit worried about all browsers supporting iframes since it's in fact an old thing.
I think your best bet would be to go with a single page application; like React or Angular. This would somehow force you to build your backend system as an API server and letting most of the heavy UI lifting to JavaScript running in the client.
Some time ago I started working on a side project that would be an Amazon S3 Browser. The application runs in the browser, the main entrypoint is here but you'd be interested in looking at the Browser part itself.
You'll notice the BucketBrowser component accessible here is composed of 2 parts: the BucketList and the BucketContent, similarly to what you want to achieve.
The main advantage of working it as React (or Angular) and a neat Backend API is the separation of concerns and the opportunity to create also a Mobile or native client for other platforms that would leverage your Backend API.
I'm not a React expert, the links I've shared are part of an experiment not ready for production usage; but will help you visualize how you could achieve your idea by leveraging React.
Use SingleSPA https://single-spa.js.org/ framework and create Container app using React. Then keep your PhP code as it is and display it as child page inside Container app page. All new modules you can create as separate module. It is kind of FE microservices. We tried it using React and Vue js but I am sure it will work for PHP too.
You can open your admin releated stuff on own workspace = virtual desktop
Thats supported on Linux, on Window and perhaps on other OS too
The follow some hints how to to some thing on Linux:
Check how many workspaces are configured on your system:
wmctrl -d
You can set a different count of workspaces if you like:
wmctrl -d | wc -l
# or on follow way:
wmctrl -n 1
Open a program in foreground on current active workspace and move to 2`nd workspace:
wmctrl -s 1 ; xed & sleep 3; wmctrl -s 0;
Open a program in background on current active workspace and move to what ever your prefered workspace is:
Thats possible too.
You can display what you want on your background picture of your screen:
on Linux systems you can use p.e. Conky
Conky: http://conky.sourceforge.net/
Conky-Optionen: http://conky.sourceforge.net/config_settings.html
Conky-Variablen: http://conky.sourceforge.net/variables.html
Conky-colors: http://helmuthdu.deviantart.com/art/CONKY-COLORS-244793180?
Wettercodes: http://edg3.co.uk/snippets/weather-location-codes/germany/
https://www.linuxmintusers.de/index.php?topic=33952.0
https://www.linuxmintusers.de/index.php?topic=11139.0
on Windows systems, you can use p.e. bginfo
It can be they are like this on other OS too.
I have some pages that could benefit from being statically generated by implementing getStaticProps. The problem is, inside getStaticProps I need to call some api and access resources aren't available when I want to do the build (that is when building the docker container in which next.js will run).
Is there a way to tell next.js that I want to postpone the build of some pages untill they are requested for the first time? I feel like it should be possible, the revalidate option for getStaticProps almost does what I want (it re-generates the page the first time it's called if the previously generated one is older that X), problem is, it still tries to generate the page on next build.
There's also the fallback option for getStaticPaths that almost works for me because it allows to postpone the generation of a dynamic-route page. Problem is, I need it for static-route pages too.
My team's primary goal is to be able to "snapshot" a CMS-driven site to static HTML. This is straightforward using getStaticProps and next export.
But we also need to host an intranet version always fetching latest content from the CMS. Using getStaticProps this is not really possible because its output is cached, and if you use the older getInitialProps you can't "freeze" the server version of its output during export.
next dev makes this easy; it has a service that offers up fresh versions of the JSON files that will be made static during export.
On a long-running site, are there important configuration changes that would make next dev safe/safer to use?
In 9.5 Next added Incremental Static Regeneration, a fancy way of saying getStaticProps will regularly invalidate its output some time after the next time it's requested.
This is still not ideal because someone who makes a CMS edit will want to see the change reflected on the very next request, but instead they'll see the old content, wait a few seconds, and reload the page.
On static export, nothing changes: getStaticProps turns into a static JSON file.
I'm starting a large scale app and need advise on setting up the folder structure and all. So I'm not sure if on Meteor startup if it loads all of the components to one file or not ( if all the components are in the client/ folder )
If it does not load all the components and send it to the client initially the this question has been answered. if Meteor do send all the components to the browser then need a way to fix it.
At the moment I have like 70 components and do not wanna send all of this to the user on the initial page load.
It seems as though incremental/on-demand loading for components is in the 'todo'/'future feature' stage.
From - Trello: Meteor Roadmap
Right now, on initial pageload, you download all of the JavaScript,
templates, and css in the app.
This task is to make it so that you download just the parts that you
need. You might download additional parts in the background, or
on-demand as you navigate through the app. (To be clear, this would
apply to the JavaScript, CSS, and templates, not to database contents,
which would continue to be handled by the subscription system.)
It should be possible to secure some of the additional parts so that
only certain users can download them. For example, only admin users
could download the JavaScript and templates for the admin console.
Related: when the app is updated, only download the changed parts, not
the whole app.
I made an ASP.NET MVC application which allows user to create dynamic websites. I need to add feature which will allow to download from server off-line version of choosen website as static html files with menu, hyperlinks, images, documents etc. It should work similar to applications such as Teleport Pro, but I have to choose from Admin Panel which content should be export.
Client wants to burn static website on CD, save on pendrive.
Do you have any ideas how to begin? Please help.
I currently have implemented that in a current project...
User is able to change anything in the frontend and at the end he can publish and download the offline files... the site subscribe users and show all prizes, winners and more information about that campaign.
All was done in ASP.NET MVC3 under .NET4 and hosted in AppHarbor.
It's composed at several applications but for what you want, you develop the Backend and the Frontend, and to generate the static files, simple use the Frontend to grab the full HTML
As an example, I can show what 2 users did...
Callme.dk did http://callme.julekal.info and
Sony Nordic did http://sony.julekal.info
plus, you can simply point custom domains to it as well like http://sonynordicxmas.net/
To publish and generate all files:
one part of the editing:
So I give the users, offline access (through the .zip file), online access (through the frontend application) and the ability of using custom domains...
I think the only way this might be possible is if you go to every single page and then use your browser to "Save" the web page script and all.
However this causes several issues;
You never quite get everything and you need to massage the HTML produced, dowload all the images etc to get the page to look right
Each html file now has an associated folder with the same name and each time you do this you will get another html file with a folder. You can combine all the folders into a single one but that leads me to item 3.
You will need to edit each html file to clear up any pathing issues if you want to share a single source folder.
Data is no longer dynamic!
You need to, if you want to link all the pages to each other, edit every single html file and resolver the anchor tags.
This is too much work and I think it actually breaks the true requirement.
Don't do it! :)