I got confuse while searching top JS backend framework then I found NextJS is one of the top list, I thought nextjs is just a simplify of CRA and still need like nodejs as the backend. Back to my confusion, so when we normally create a full JS app we will need frontend and backend tech like (nodejs + reactjs) so with this nextjs we can make a app just with nextjs ? **sorry for my bad English
Simply said, NextJS is basically React on wheels and has NodeJS built-in. It has lots of other features built-in so you need almost zero-configuration to build a full-stack app.
If you have 10 minutes to spare, take a look at this video
Essentially NextJS is a full-stack framework. Which means that developers can write both front-end and back-end code in a single environment. It can provide multiple benefits among various use cases. Which can be things like seo optimization, image optimization or quickly switching between different rendering methods (SSR, CSR, ISR or SSG).
As for your question "Can we make an app just with nextjs ?", you certainly can but it depends heavily on what type your app is.
Related
I have a Back-end web application that provides me with custom API endpoints (Java - Spring). I like to keep everything separate. one API application that provides everything else remotely. My question is: What is the best practice to start a new Front-end project that connects to my API?
Requirements:
The Front-end project should be on a different server
The Front-end project should support routing, meaning I will have full control regarding the /paths. so no .extensions at the end.
SEO is very important in this specific case.
My preference is to go with React.js but I have doubts regarding SEO because the project I want to migrate from is WordPress (up and running with a good SEO performance).
I wish that I can find a simple solution with pure HTML, CSS and some kind of JavaScript.
Thank you.
React isn't actually bad for SEO. So long as you're taking the proper steps to ensure that the page load time isn't bad. If the site that you're migrating is massive, make sure you're lazy loading.
If you have doubts that Google or other search engines will render the js, then I suggest going with Nextjs like Rakesh K mentioned.
There's also nothing wrong with recreating the site with a templating language like Handlebars, then rendering it on an Express server, or whatever suits you. Just including this option in case you don't know React, and don't want to have to learn it.
In the last few years, I’ve been working with an old fashioned stack, but pretty effective for my use case. The stack was Node + Express.js + Angular.js 1.x.
Basically, the backend made the rendering of the view (via dot.js or Handlebars, any template engine) and then, in the Frontend side, the Angular app was mounted.
The use case needed to be SEO friendly, so the content must be generated at the backend and served directly. Also, the UI has its functionality, forms, etc. It’s not just dummy text.
Currently for a new project with the same use case, I want to update my stack (using SSR aka server side rendering) where the app does not need to be a SPA (single web app). The base stack is still the same (Node + Express.js) and the only thing I want to update is the frontend library / framework.
I am looking for a framework / library with a big community and an easy way to share component and codebase across project. That’s why my first thought was React.
The first thing I found was Next.js and while I was reading and investigating, it goes beyond what I need. It is a quite big framework that has too much stuff I don’t need and I do not want to add overhead to my application and I cannot customize it as I desire.
I continue researching and I found an express package called "express-react-views" that is a template engine for express but it does not allow to mount the React application at the client side.
Browsing through the Github issues of the package, I found many people asking for these and they all end up being answered that Next.js was the way to go.
My doubts / concerns are the following:
Is React the right tool / library for this use case?
In case of not being, what do you recommend?
Being the right one, is there any package / tool on top of React and Express that helps me out with SSR that allows me the customization I need?
I don’t want to rely again in old or antique tools like jQuery or Angular.js 1.x because the maintenance and code sharing across projects is complex and annoying.
The easiest solution, without going deeply into Next.js, is using the native React feature ReactDOMServer:
https://reactjs.org/docs/react-dom-server.html#reference
It's actually pretty easy to use, you just serve the HTML as a string and mount your React App Client Side if you want then to handle requests with React Router.
Stumbled accross NextJS in npm and tried it out. Look pretty good and relatively easy to use. However, one thing about it is still not clear to me:
Suppose I want to have also have a NodeJS (or whatever) api server in complement with the server side rendering that NextJS offers. Do I need 2 server then? For example:
Also is NextJS just a rendering server (which can render React components and creates HTML) or something else/more?
You can definitely use the same server to implement your api.
On official documentation page about Custom server and routing there are examples of integrating with popular node frameworks like express or koa - so you can use them for regular purposes.
What about nextjs itself - like it's said on official documentation page:
Next.js is a minimalistic framework for server-rendered React
applications.
So it has not only capabilities of server side rendering, but also routing (including client one), css-in-js setup and so on.
Can someone enlighten me on web frameworks using nodejs? I recently started learning express js from free code camp and while it's all going good I'm confused as to what express entirely is. Is it a full stack framework? Is it purely for backend? I see that you can use different templating engines along with it.
I see things where people say you can use front end frameworks along with it. If express is able to already render views, what's the point of using a front end framework.
Also, what's the difference between express and something meteor, vuejs or react? There's just so many buzzwords out on the web that it's confusing.
Express is a back-end web server framework that runs in nodejs. It is purely for the back-end, though you can define routes/endpoints in it that any front-end can make ajax calls to.
You use Express to make the handling of web server requests and responses easier and fasster. It has support for things like:
Defining routes/urls/endpoints that you want to handle.
Serving static web pages.
Installing middleware for a wide variety of things including sessions and authentication.
Hooking into one of many template rendering engines.
Automatically parsing things like query parameters and form submissions.
Is it a full stack framework?
No. Express does not have a front-end component.
Is it purely for backend?
Yes.
Because Express has become so popular, there are also thousands of add-ins that can plug into express (often as middleware) for things like sessions or authentication.
Since it handles standard HTTP requests, you can use it with any front-end technology from just a plain browser to the many front-end frameworks.
Also, what's the difference between express and something meteor,
vuejs or react?
Express is a back-end framework (runs on the web server). vuejs and react are front-end libraries (run in the browser). Meteor is a full-stack framework. On the back-end, it runs on nodejs and the front-end component runs in the browser.
I see things where people say you can use front end frameworks along
with it. If express is able to already render views, what's the point
of using a front end framework.
Yes, Express can serve the web pages you view and it can use a server-side template engine to render them. But, there's potentially a lot more to a front-end framework than that. For example, express provides nothing to manage a user's interaction with a page in the browser or the building of dynamic web pages that change based on user interaction. If you're building web pages that create, read and update data from a database, then Express by itself provides no automation for doing that while other frameworks can offer a lot of help with that. You could build all that in your own JavaScript that would live in the web pages that Express was serving, but Express provides no help with that at all other than just delivering the JavaScript that you wrote on your own.
If you want to know more about what front-end frameworks do, then I'd suggest you read about frameworks like react, vuejs or angular to understand their value proposition. I'm not saying that you have to use a front-end framework (because you do not). There are zillions of sites on the web that consist of some sort of back-end framework and then plain JS/HTML web pages. Whether a front-end framework would benefit your development depends on what you're doing and how well it aligns with what a particular front-end framework offers.
Here are a couple good articles about what reactjs is:
ReactJS For Stupid People (fyi, I found it a very good article for smart people too).
What is React.js and Why I recommend it to other JavaScript Developers?
This article Full-Stack Frameworks contains a useful discussion of pre-built full-stack functionality such as Meteor vs. using a combination of technology such as MEAN (Mongo + Express + AngularJS + Node.js) or MERN (Mongo + Express + React + Node.js) and also touches on which technologies are more commonly used together.
To preface; I'm an experienced web developer, though I have barely used nodejs, and have not yet had the opportunity to work with emberjs (though I've done a decent amount of work with backbone).
I'm about to start a project to build a web based writing application (literature). In theory, the user would potentially have the application open for long periods of time, perhaps leaving it on. I intend to develop an expanding functionality set over time, which I would like to be able to drop into different places with relative ease. For example, perhaps develop a character list which I could then include in many places. I'm keen on using emberjs for the experimentation alone, but it also sounds like a good client side framework for the job.
I've looked at django briefly (haven't used it much before), but given that I'd like to use emberjs, it seems like django isn't a great choice as I'd be opting not to use many of its most compelling features.
Would writing my server side code in nodejs + express be a reasonable choice? The web application itself will have common features like login, admin, different permissions for users/tasks (eventually) - but I also anticipate some more beefy stuff.
This is a solution that works well for my team and I so far. While lacking express, Charcoal is a good starter project to get up and running with Ember without a Rails asset pipeline and Express can easily be added as middleware. In addition to using Express to serve your JSON, it can handle the minimal HTML needed for such requirements that Ember can't fulfill by itself such as SEO since content negotiation capability is very simple in Express.