I'm creating a real estate website.
I'm using Next.Js as framework for react.
To optimise my system, I want to create a system such that:-
On first request of main page from client side, server should serve some basic data and redux, then using redux, I want to call api, recieve data and further render some same kind components on client side. Then I want to attach a functionality to the components such that, on click it checks the requested page on a custom static folder, if it is available then serve it statically to client, if not then rendered the page on server by taking data stored in redux and copy the static version of page to custom static folder and serve to client. I also want to make a function which continuosly checks on the static files expiry and update.
Problem is I'm unable to achieve the functionality of storing chunks of page statically on a custom folder, and creating check function for it on Next.Js
-------->>>>>>>>>>>>
Attaching rough image of system.
Rough Image of system
-------->>>>>>>>>>>>>
Any help or idea will be appreciated.
Related
I wonder if I don't use server side rendering in next.js, do I have to I have to run dynamic website with node server? I mean, nextjs doesn't create an index.html file like react. Therefore, I can't run the project without node server. I hope I could express the situation
You can still have a dynamic website even without the Node.js server (i.e., static HTML export). You'll need to use client-side data fetching:
Client-side data fetching is useful when your page doesn't require SEO indexing, when you don't need to pre-render your data, or when the content of your pages needs to update frequently. Unlike the server-side rendering APIs, you can use client-side data fetching at the component level.
A Node.js server will be required if you want to use Next's own API routes in the same project or if you change your mind and want to use SSR features (e.g., getSeverSideProps) afterall. In my own experience, for example, I've paired a static generated frontend from Next (served by Caddy) with a REST API written in Go and had no issues fetching new data from a Postgres DB.
I’m building a static site in Next.js. As static sites produce pages with the .html extension, I’m using the as attribute on my Link elements, which allow my pages to be reloaded.
I have now introduced the use of query strings to my URL’s so that, when the pages are reloaded, they remember what content to display, by use of the getInitialProps() method.
So far, so good, BUT ONLY DURING DEVELOPMENT.
The problem I face is, when the site is exported out as the static version, Next.js fails to call the getInitialProps() method, hence, when the browser is refreshed, my pages no longer know what to display.
Can anybody help with any of the following:
Is there another way to allow static pages to be refreshed, without the use of the .html extension?
Is there a way to ensure that the getInitialProps() method is called when exporting a static site and when reloading a page?
Is there another way in which I can retrieve the query string from the browser URL, as Next.js doesn’t seem to have the ability to access even the top level window object?
getInitialProps is only available on server-side rendered apps. It runs during development because Next doesn't know if you want your pages to be static or SSR. But when you run next build && next export, they become static and getInitialProps no longer runs. I believe this is also why next switched to getServerSideProps and getStaticProps instead of getInitialProps (for everything but the _app.js page)
In response to your list of questions:
Next exports so that you don't have to use/show the HTML extension, but that also depends on your hosting setup. Exporting a static site exports .html files, but it's up to your hosting configuration to determine whether or not those are shown.
See above and no - there is no way to have getInitialProps run on a fully static, exported site. You'd need to switch to a server-side rendered site if you have to use getInitialProps.
Your static site can retrieve the query string, but it's not going to have it at build time. Instead, you'd need to check for it (usually in React.useEffect) when the window object is available. On a static site, that's not at buildtime but only at runtime. Check out this answer on how to get the query string in javascript - you can use this in your useEffect.
Let's say I have a blog made in Next.js by consuming a REST API from a headless CMS. I know how to load posts and so on. But where do I load the basic website info such as name and color? I thought about loading it on _app.js but when I define loadStaticProps() on it, the nested loadStaticProps() on another components doesn't get called and when using another kind of data loading, such as using Axios, the site wont be truly static. What is a good way for doing it? Thanks.
I think there are multiple questions here
But where do I load the basic website info such as name and color?
I am interpreting the question so you may want to add more details to complete the answer. You have two options when using data that is truly static in nature.
You can use the post mechanism to create a website info that you can load as a specific call
You can store the static information in a separate file in the server and read it off and update the data via a git update which will reflect on the site. If this won't change often, e.g: a website name - You can use getStaticProps to get this information at build time
I thought about loading it on _app.js but when I define loadStaticProps() on it, the nested loadStaticProps() on another components doesn't get called and when using another kind of data loading, such as using Axios, the site wont be truly static. What is a good way for doing it?
Page data that is truly global can be fetched via _app.js + getStaticProps seems to be a long running open issue - You can follow the thread here and one potential workaround here - https://github.com/vercel/next.js/discussions/10949#discussioncomment-6148
If building a react app produces only static files how can dynamic websites be created with react?
Or can react build dynamic content too?
I have only made statics websites with react.
The short answer is yes - React can provide dynamic content.. You can also configure React to be a "dynamic" site (aka server side rendered) by using something like Next.js
Rather useful article..
To elaborate...
The relationship between a dynamic site and dynamic content is not mutually exclusive. A static site can most definitely provide dynamic content..
When you boil it down, a NON-static, or dynamic, website essentially refers to a website (or certain pages within a website) that are rendered server side. A static site refers to a website (or certain pages within a website) that are pre-built and then served to the client..
In the case of 'dynamic' websites, dynamic data is gathered server side and injected into html via some sort of a templating engine.. (Razor on ASP, Handlebars on Node, Jinja on Flask, to list some examples) ... As for 'static' sites, dynamic data is usually retrieved from a backend API that resides in a separate location than the web server that served the 'static' content - the requests, etc are all performed FROM THE CLIENT SIDE..
Basically, take the terms "dynamic site" and "static site" with a grain of salt.. Dynamic content is not mutually exclusive to either paradigm, and can exist using either paradigm.. You can have a dynamic site that doesn't have dynamic data..
Dynamic sites inject dynamic data into html server side, then send it to the client for viewing. Static sites gather dynamic data from a server somewhere (could be an API you control, or some 3rd party API), and then inject that data into the markup - difference is this is ALL done client side. If you wanted to retrieve data from a third party API using a dynamic/server side rendered site, the client would request a page from your web server, then your web server would query the 3rd party API, and inject that into HTML, then send the HTML back to you..(at a high level).. With that being said - you can still call 3rd party APIs client side, manipulate data, and manipulate the DOM client side, when using server side rendering..
Static sites basically send the entire website to the client (at a high level) upon the initial request - even if it contains multiple "pages".
React can be inter-mixed with dynamic server-side code such as PHP, ASP.Net, etc. In the case of ASP.Net, you can just use the React templates for ASP.Net, rather than using pure React-only templates such as CRA, or NEXT, or you can install React manually into your ASP.Net project.
If you want to build a React App that strictly produces static files for some reason, and still want some dynamic behaviour (e.g. loading from database), then you might want to look at JAMStack. The main idea is for dynamic operations, you either:
Get the dynamic data from an API on the run-time of your static pages
Get the dynamic data from an API on build/compile time using Static Site Generators (SSG)
I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.