I'm currently building my first next app (e-commerce with Shopify Storefront API).
In order to avoid multiple query to the db and upgrade performance, I want to store all datas once a user sees a page:
1- first loading (by page): the method getStaticProps fetch the necessary datas and put everything in a context ShopContext
2- when the user hits the page another time: instead of getStaticProps re-fetch the datas, just use the data in the context.
Is it something logical to do that? And if yes, is it possible to avoid data fetching when a loading page occurs?
Many thanks for your responses ! :)
Related
I am making a react SPA application, atm I'm using fetch every time page loads, I would like to know if it's better to store such data(for example: user data) in Local Storage and if yes, what if some data in the backend DB changes?
Sorry if there are similar questions, I just couldn't find them,
Thanks
Store user data after fetching from server in local storage is good solution that I have used before.
Use React-Query
For update user data after that updated in DB I recommend using a swr approach packages like react-query which sync your local data with server immediately.
I use only firestore admin to access the database.
I have a function to retrieve the data from firestore. Given a collection name and option parameters (orderBy, startAt, endBefore, limit or limitToLast), it returns the resulting data in an array as well as a string with the url for the next page query and another one for the previous page. Something like this:
export interface FirestorePaginatedResponse {
data: any[],
nextParams?: FirestoreQueryOptions,
prevParams?: FirestoreQueryOptions,
}
export async function paginatedQuery(
collectionPath: string,
basePath: string,
options: FirestoreQueryOptions,
) {
[...]
return {
data,
nextParams,
prevParams,
}
}
So, considering that Static Page Rendering is not an option for Firestore pagination, what would be best for SEO A or B?
A. Do the pagination client side. One landing page with getStaticProps to load the initialData, and then use useSWR hook to retrieve and prefetch the data client side for the next pages. With useSWR probably we would save some reads to firestore due to caching and due to static generation the loading time of the first page would be faster.
B. Do the pagination with server side rendering. The landing page would have a getServerSideProps function to load the data directly given the query parameters before the page is rendered. I think that server rendering might be better for SEO, but maybe the loading of the page would be slower.
In any of those cases the query parameters are read from the url, and the pages are navigated using next/link with href to do the client transition between pages.
EDIT:
I tested 2 pages for pagination with the same content one with getServerSideProps and another one with getStaticProps. The initial loading time of the page is almost the same, so I think I'll be going with the server side rendering as xBurnsed said, for SEO it's better ssr than csr.
As far as I am concerned, the best approach for pagination when it comes to Firestore is to start at the first page, and then cycle through the results using startAfter() with the info of the doc where the last page ended. You can find more information in the following documentation.
Since pagination is meant to prevent loading all documents, I would choose to fetch the documents for each page on demand using the above described method.
Server-side rendering is considered a better option for SEO than client-side rendering. This is because server-side rendering can speed up page load times, which not only improves the user experience, but can help your site rank better in Google search results.
Server-side rendering is also better for SEO because it removes the burden of rendering JavaScript off of search engine bots, which makes it faster for them. Also, not all search engine bots are able to run JavaScript, as stated here.
I'm developing a react e-commerce app with Firestore database. When the app loads it fetches first 50 products (each one is a Firestore doc), and renders the product card with the data. My question is where to store this data for easy access in case of page refresh, navigation to say to order page and come back to the products page, close the tab and open again etc.
I'm asking this because when I monitor my Firestore usage for following;
I open products page and load 50 products, go to second page load another 50 etc.
Do filtering get another 50 products, remove filters, get the first 50 products again.
Go to orders page come back get 50 products.
All in all one session can easily reach thousands of doc reads, lots of data use and longer load times. So I think I`m missing a point here. There should be a way to store all these data without making the app slower and data usage more expensive. What would be a good approach here to save the data in session and full refresh, close the tab and come back etc. ?
P.S. I'm using Next.js and Firestore, data fetching is done on the client side via Firestore web library.
As soon as you get the data from firebase simply store it over local storage as follows,
considering you get the data of component load like in a useEffect and store it in a state name as product. Now my approach would be to look for any update in product variable through useEffect and simply update the local storage
const [product,setproduct] = useState([]); // containing array of product
useEffect(() => {
if(product.length>0) localStorage.setItems('products',JSON.stringify(product));
}, [product]);
That way you have it on localstorage and use it anywhere around the application. Also in other components while calling firestore to get product make sure to check local storage first. If there is already some data stored over local storage, dont go up for calling firestore to get data.
That will reduce you API calls and along side increase the performance of the application.
Voila! I hope it solves your purpose. :)
With nextjs 10, you can have a catch all route, which looks something like this [...id].tsx. The idea is that this will allow for dynamic pages. So it should match /example, /example/new, /example/new/latest etc.
The issue im facing is that a specific matched routes (for example /example/new) may need extra data in order to correctly render. Seeing as i only really have one file in my pages folder, i only have access to one getStaticProps call. Fetching all possible data for all possible routes seems quite wasteful.
Server side data fetching at the component level would solve his issue but this doesn't seem to be a supported feature in nextjs
Is there a recommended way around this? Conditional data fetching based on context inside getStaticProps ? 🤔
Where you should fetch data depends on the nature of your data. Also, when a user needs the data. You can use getStaticProps, getServerSideProps or fetch data on the client-side. See documentation to learn differences between the methods.
Workflow
User login to the app
He will see a list of item fetched using queries(Works fine)
Now, he will add an item in another page(adding using normal POST call, not using graphQL)
When he comes to the listing page, the new entry will not be there :(
How to solve this? I understood, apollo is maintaining a cache. So, it doesn't make any request.
I want to force refetch the data from the server every time I load the listing page.
How can this be done?