I am trying to create a complex CRUD React Application using Gatsby JS. The ability for the user to Create Posts, Edit Posts, Delete Posts will also need to be available. This app will have many users. We are not using a third-party CMS. Everything will be done within the Gatsby App. There will also need to be several different pages that will need to handle state, display, and sort the different posts based upon options. My question is, is this sort of project overload for Gatsby JS since it breaks the page model? Gatsby doesn't have a native way to generate dynamic routes or views, only pages. Its sort of a social networking app, is Gatsby JS the wrong tool for the job?
You can create pages "dynamically" using the createPages API.
https://www.gatsbyjs.org/docs/node-apis/#createPages
There's also a great series of videos from Scott Tolinski that demonstrate the use of this API.
However, GatsbyJS is a static static site generator, it's designed for performance and more content-based sites. The only way you're going to get CRUD functionality is through API calls from the front-end which could have some security implications that you need to consider.
As an alternative, you might want to take a look at Next.js. Same kind of idea but the pages are served by Express.js rather than just served off the file system so you have a lot more options for more dynamic sites.
Related
Overview
I need to improve the SEO / meta data for a React website that I made with the npm pages Create-React-App and React-Router. I would like to remake the website using NextJs in the most efficient and effective way possible. The project is hosted on Netlify.
Background
I am doing this because this is a single page application that uses react-router, and so webpage meta data is not displayed for each page when being shared on social media sites and not rendering in search engine results pages, other than the meta data included with the root index.html page.
assumptions
NextJs includes server-side rendering and static rendering. It's my understanding that this will allow distinct page metadata to be included with each when they appear in search results or in rendered page preview that is generated when the link is shared on various social media sites.
Conclusion
I will completely understand if there is no streamlined way to do this, but I am new to NextJs, and I want to make sure I am not overlooking any methods that would simplify and speed up this task. The client who ordered this site expected meta data to render with each page so they are eager to have to have the SEO improved as soon as possible.
I'm working on a project, which has two applications, one is an admin portal where users can customize and create their profile and other one is an application which will preview the profile user creates.
All good with the admin portal, which is developed with CRA - React App. Earlier I was planning creating profile app also with React. Anyhow considering SEO and performance I'm thinking about pre-rendering the profile whenever user changes data.
This will improve the performance by considerable margin and SEO as well. SSR is another good solution, however when there are thousands/millinos of users view single profile, there will be a huge demand for server performance. So that I'm planning to work on a POC, which will create static profile with partial cliend side js functionalities for each user and store it somewhere and serve it through CDN.
I want to know two things here -
To implement this, I'm having lack of knowledge in terms of available solutions. Solutions for storage, cdn.
How can we render static pages during the data changes.
To implement this, I'm having lack of knowledge in terms of available
solutions. Solutions for storage, cdn.
Check Cloudflare CDN. But there are many other proveriders.
How can we render static pages during the data changes.
If you are using pre-rendering, You can rebuild the page assets after a profile page is updated and redeploy them.
If you are using SSR then the server load will be high but no need to redeploy (as the page is rendered at runtime from the origin server always).
I would recommend you use Next.JS support for server rendering and pre-rending instead of implementing them on your own.
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages so that it is possible to share personalized links to users
in social networks using OpenGraphic meta tags and the like.
The problem
The project was made in ReactJS and ReactJS has only one HTML page as root (/public/index.html), in this way, everything is generated with Javascript in a root tag, and when it arrives in the browser it is transpiled, as we already know. The problem is that the crawlers responsible for understanding the meta tags are not able to understand Javascript and end up not finding the dynamic data that I am defining on the page that I need to share the link on. They understand that there is one html file and only.
Attempts to resolve the issue
1) Define the meta tags in the /public/index.html file itself
This solution doesn't work because the data we are using is dynamic and the index.html file is a static file
2) Using react-helmet
The solution allows meta tags to be defined, but as already mentioned, crawlers don't understand JS. So, despite being on the page, the meta tags do not appear when sharing the link.
3) Using some SSR technology
This is a possible solution, but we were unable to integrate any SSR Framework into React. And it is not feasible to change the base technology of the project. We can't just switch from React to Next, for example, as the project is already complete.
4) Using a small server made with express.js along with the React application to replace the meta tags in index.html with string.replace() simulating something like an SSR
This solution works, but it causes two requests to be made every time the page is accessed, once by express.js and once on the front-end side by React. Due to the number of requests increasing, this solution was discarded. But if necessary, you can do it. In this case it is also necessary to check if Amplify can keep the application and the small server running in the same project.
5) Using react-snap with react-helmet
React-snap allows you to create html snapshots of the pages of a React project based on their routes and links, this added to react-helmet generates a perfect solution for links to be treated well by web crawlers when they are shared. But the solution doesn't work with dynamic routes. For example, /your-route/:id is a dynamic route that expects an id to be fully defined. React-snap gets lost when trying to create a snapshot of a route that only exists when the id is set. Unfortunately, this solution doesn't work.
These were the solutions we used to try to solve the problem, but it was not possible yet. Probably attempt 4 would be the most ideal to solve the problem. But we are looking for the best way that will not generate reworks and future problems. If someone knows a better way to do that, would help us a lot!
I apologize in advance for how new I am to this all. I have a new business and there are some things I want to code for it myself as proof of concept till we have enough revenue to actually hire real coders.
Our ecosystem will have 4 major areas and I'm not sure if my approach is how to go about it or even possible.
The normal, static, info webpage that just talks about our business. (SEO and load times important)
A React JS / Next JS non-static section of that same website for blog and other dynamic content. (SEO and load times important)
A react JS employee backend for customer tracking and another tracking of customer data. (SEO and load times not as important here).
A customer portal where they can log in and see stats and stuff about their account (this will pull from data we enter in the employee backend and they can access to track progress) (I would eventually like android/ios apps as well as web portal for this so I was thinking using react-native / react-native web for this section to try and maximize code reuse. (SEO not important, but a smooth experience is)
I planed on using firebase to host it all. I'm curious if this seems it can work? Can you combine all of these different frameworks and strategies in one overall project like this without causing over bloat of download and such? Like for example, the employee backend will likely have a lot of packages and dependencies that the static front end would not require. And the static frontend would be in the same project as the dynamic blog but be built on different things (one static HTML, the other react with next.js? is that a bad idea?). Also, it's been hard to find info on exactly how goog react-native-web is so I'm just lost with this all and would love some guidance. Thank you so much in advance for any direction you can offer.
With firebase hosting you can host static sites, and redirect some paths, such as /api/* or /dynamic/* to firebase cloud functions.
On those cloud functions, you can do dynamic rendering, e.g. with remix.run or next.js.
If you use good cache-headers on those cloud functions, firebase hosting caches the results appropriately, making dynamic rendering of all pages feasible too.
I need to develop a simple social networking website which will just act as a platform for different businesses to discover each other. Each Business man/Service provider will have his own profile that he can manage and these profiles will be characterised and sorted according to their types. Basically I would need a Home Page, Profile page for each profile, Search page along with registration and login. I don't need to make any messaging module.
So for this purpose I wanted to know if using Gatsbyjs is a good idea, also if not then what are the other frameworks that I can use for a easier and faster development.
One main problem with gatsby for this use case is: Once a new business signs in and wants to create and edit a new profile, this new profile is not part of the build process. Gatsby builds only the HTML pages you know in advance. Triggering a rebuild, which may take several minutes, everytime a business edits their page is not feasible. You would have to hack something together with client-side routes which is not the intended nor recommended way of doing things.
A server-side framework like Next.js is better suited for this task. This way you can dynamically add and change the profile pages.