I have a nextjs app with two pages, they have same design but both display different data, what is the best way to implement this idea with keeping the url path unique for each page.
after asking some friends about this issue the best answer i got (from my prospective) is to separate the repeated code at the two pages into a new directory which I named shared and a new component that has only one job to display the data passed to it from both pages.
Related
I have this big issue.
I have developed a Gatsby website for the car parts market.
The users can select car model and part type and receive a page with the parts for their specific car.
I have used React Route to create dynamically the new path and an API that recall the data:
https:/mysiteAPI.com/{car.id}/{part.id}
The paths that will be created are something like that: https:/mysite.com/comparison/{car.name}-{part.name}
The big issue that I have is that this path will be created only when i click on
Using this approach I can not generate the pages when I build the website, but the pages will be generated only when users click.
Actually I need that pages will be readable from search engine crawlers for SEO reasons.
I tried to create each page inserting in Gatsby Node a CreatePage, but the system crashed, due the huge amount of pages (over 5 million).
I don’t know how to generate pages that can be readable by crowler and persist. I hope that someone of you can help me to improve my site.
Thanks in advance
Take a look at the createPages API, available in the gatsby-node file of your project. If you would like to create static HTML files in the build process for each item you need to first fetch them somehow. With the data in your possession you could iterate over it and call createPage for each page you want to create.
I recently started working with next.js, although I already have some experience with react, I have the following folder structure:
/segments
-index.js
-[slug].js
Scenario: On page [url] / segments I get the list of segments by making a call to my api, which returns an array with all the information for each segment -> I display the list of segments for the user -> User chooses the segment and navigates to [url] / segments / slug. At this point I would like that on this page [slug] .js to receive the segment that the user chose (since everything I need is already in the object) without the need for another call to the api.
I know I can use context for this, but I was wondering if next.js can solve this problem without having to use the global scope. Just passing a fetched data on one page to another.
Thanks All
You must take advantage of custom _app.js to share data among your application.
I have answered in detail to the same question which you can check it out in the following link:
Next.js: Reduce data fetching and share data between pages
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
I'm new to AngularJS, and i'm want to know what's the best and easiest practices to do this simple shop list application.
So this is my shop:
I got three servers in my select input. Each server got own list of items, displayed in another component.
I'm thinking about creating routes with variables like localhost:4200/shop/{server1} which gonna show my list of items based on url path. Select option will just change path in my application to show shop list for specific server.
Is it a good practice, or there is better and easier solution to implement this simple shop application?
If you're asking if filtering data with routing is a good practice with Angular, I can say that it is not a bad one. Here's a link to the official Angular documentation about routing : Angular - Routing
But if you're asking if it is the only way to filter data or spread parameters, the answer is clearly no. Angular projects are SPA (Single Page Application), so you can do everything without touching the url.
For a quick example, you can attach a (click) event on your elements that display the shop list you want
I think you can use just one component and three different click events to display three different results. One component can work in your case. Using a router and routing logic for your requirement will be a costly affair. Your user will have a better application feel if these are covered in just one component and with three different click events.
I'm confused
it seems there is 2 way to run reactjs projects
1. in browser between html and script tags
2. not between html and script tags(it runs on browser) but it's different
I'm confused. explain it to me plz
React is a technology that is rendering custom web components into the browser, when you have a view, let's say dashboard composed of multiple React components, you have two ways to display that to a user:
1/ you display the html that typically contains the root React element and load an associated JavaScript script which contains all the React logic, then fetch the required data of that dashboard, so it will render all your graphs and stuff.
2/ when the user request that specific page, your server application already knows which data are required to render the initial view, so it will compute in advance how the page looks like and send a final first version to the user, it is called server-side rendering. From there obviously the page can be dynamically modified by local JavaScript running in browser afterwards, based on user interaction.
Both approaches have pros and cons, like testing capabilities, speed of execution, and so on... so I encourage you to read about the topic on the web, you can find tons of articles on React server-side rendering that will explain that better than me:
https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/
https://github.com/mhart/react-server-example