How to reload the page without reload partials in node js. I am creating a web application using node js, bootstrap, mongodb and handlebars. In my partial navbar the active class and js code for changing it into clicked component. when I render a page inside this the whole document is reloading and active class changing is uneffective in this case. I think it will be fixed with avoid reloading partials. There is any way to avoid reloading partials when page rendered.
I'm working on assumptions here as you haven't posted any code, I assume that:
You are using Handlebars to render the partials on your Server? (not on the client)
You have setup separate routes on NodeJS (are you using express?) so each route serves a different page, e.g. "/Index", "/About", "/Privacy", "/Contact" etc.
If my assumptions are true, each route on your server is providing an entire web page. It must re-load the partial because the client expects a complete html page for that route, and whenever the client changes route the server must provide a new page; if it didn't reload the partial then your navbar would be missing.
If you want a more seamless experience where the navbar stays there and you can modify its state, and only the remainder of the page reloads, you ought to try the Single Page Application approach. Frameworks such as Angular, React, VueJS or Svelte are designed with this approach in mind. Your routing and page templating is done client-side rather than server-side, but you can use a combination of both (I use Handlebars and VueJS)
Related
I would like to do the initial render for my React application on the server side, but am having trouble importing and using React components without using something like babel/register (which is not suitable for production).
I would rather not have to compile my server side code for production, but would like to load an node-suitable React component to send to the client via res.send(React.createElement(Html)).
When I run this I get...
Unexpected token <
I assume this is because my components render method returns <!doctype html>...</html.
Is there a way I can have Node render a React component without having to use babel/compiling code before deploying?
Is there a way I can have Node render a React component without having
to use babel/compiling code before deploying?
No. Since JSX isn't real JavaScript, you need to transpile it at some point, either ahead of time (in a build script) or at run time (using babel-register).
Personally I ignore babel's advice to not use babel-register in production. It works just fine, I always cache + prime responses so performance isn't relevant. I'm open to hearing why transpiling with babel-register is bad though.
Short answer, yes.
this is from the official docs:
ReactDOMServer
The react-dom/server package allows you to render your
components on the server.
ReactDOMServer.renderToString
string renderToString(ReactElement element)
Render a ReactElement to its initial HTML. This should only
be used on the server. React will return an HTML string. You can use
this method to generate HTML on the server and send the markup down on
the initial request for faster page loads and to allow search engines
to crawl your pages for SEO purposes.
If you call ReactDOM.render() on a node that already has this
server-rendered markup, React will preserve it and only attach event
handlers, allowing you to have a very performant first-load
experience.
ReactDOMServer.renderToStaticMarkup
string renderToStaticMarkup(ReactElement element)
Similar to renderToString,
except this doesn't create extra DOM attributes such as data-react-id,
that React uses internally. This is useful if you want to use React as
a simple static page generator, as stripping away the extra attributes
can save lots of bytes.
However, if you want to use JSX you have to use babel, otherwise, you can use Reacts JS Syntax.
Here is a link to an example:
https://github.com/mhart/react-server-example
I have recently started learning React and am trying to make a simple blogging app. I store the data (post content, comments etc.) in MongoDB and would like to render the content according to the route, such as, when I have a certain URL (like /blog/:username), I'd pull data from the database and then render a view with the data content.
Using Express, I am now using static html files ( express.static) as the view, yet this makes it impossible to render the content according to the requested route, such as:
/blog/:username/:article
It is possible with a template engine, like Jade, but Jade, as far as I know, does not work with React.
What is the correct way to make dynamic views using React while preserving the URL route structure?
Thank you
Generally speaking, there are several ways to achieve your goal. I'll sketch the one that I feel is the most natural approach when using React:
Create your blogging app with React
Use a frontend routing mechanism such as react-router to make React aware of the URL
Either fetch the data for each blog entry from the backend via an Ajax call each time the user hits a URL, or store the blog entry data in the frontend (e.g. using something like redux) and reuse it when required.
Does this make sense? If not, please keep asking...
I've recently dived into React+Flux on the front-end, and I love it! But I want to also be able to use React on the back-end to avoid having to duplicate views and rendering logic.
I've seen that React supports server-side rendering if you use Node, but I do not use Node for my back-end logic.
So I'm wondering, can I set up a daemon written in Node that just renders HTML based on the data it receives and the root React component?
What I have in mind is to have my back-end application call this daemon with data already prepared (so that domain logic can live on my main back-end application), get HTML, and return that to the front-end.
Is this approach feasible? Has this been done before? I'd love some feedback!
I see that it's been a month and there are still no comments, I will share some of my understandings.
We can use this setup:
An API written in PHP or something similar that serves data.
Isomorphic React components - render on the server, attach event listeners on the client.
Server-side (Node) - the React component uses AJAX calls to get its props from the API and embeds them into a <script id="props" /> tag in the HTML as a JSON string.
Client-side - the component checks the script tag for props. If there is data, then it uses that to skip the re-rendering; if not (due to a server error or something), it can still use AJAX to get its props.
The main idea is that the website is isomorphic (server and client share the same code), so your existing front-end can be easily adapted to this setup.
A good place to start is a simple example about isomorphic React components. This tutorial can also provide an overview to this subject.
I want a nodejs server to host an angular single page application, using angular route module.
Does the route need to get the different views from the server every time I navigate to a different view?
Is there any way to send a bundle of htmls to the client?
Am I missing something really basic?
There are some sample applications built with Angular, you should read them before starting with something like this.
To answer your question: It depends on you.
For example the "webmail-lite" client is a single page application (maybe not Angular but it's the same logic) and they transmit all template "views" (html snippets) as inline:
<script id="Mail_LayoutSidePane_Toolbar" type="text/html">
<div class="toolbar">
<span class="resizer_top" data-bind="event: { 'dblclick': resizeDblClick}"></span>
</div>
</script>
So you just take care of the data you want to display and create your server-side views to deliver the main index.html file and your data/RESTful/JSON-Views.
A more "clean" way of inherit templates is the use of require.js.
OOPS...
ng-app was directed to the wrong module.
Therefore the route wasn't able to get the view.
I am working on a single page web application and have run into a question for which I cannot seem to find the answer.
Is there a way to load partial views from server side when using angular? I am using nodeJs, with express and Jade, and wanted to load partial views into angular, but I am confused on how I would do such. Is there any particular guideline that I should follow to structure my files?
I do not want to load all of my partials from angular, so I wanted to know if there is a way to load the views in from node.
EDIT: What I mean to ask is, am I allowed to load in partial jade views on angular? Does that have any effect on the way the page renders?
You can't. Angular is a Single Page Application framework, it means that you application (ie HTML+CSS+JS) is loaded once at first load in the browser, and all what happens is a communication of raw data (JSON over REST for example), Angular is in charge of displaying correctly the already-loaded-html correctly according to these raw data.