A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application.
— From Wikipedia

If you have invested and built applications using the server-side technology, such as ASP.NET MVC and ASP.NET Core MVC, you probably know that it is hard to make the server-side rendered applications into the single-page applications. You will need to change the server-side routes to be the Web API that returns data in JSON format. You will also need to develop the client-side templates and state management to handle the JSON data. It is like re-develop the application. After you’ve done the work, you have a single-page application. However, you will find out that now you are missing the server-side rendering capability to improve the first loading time and to support SEO.

I give you good news. Use AppRun.

AppRun is a 3K library for developing applications using the elm inspired architecture, events, and components.

AppRun can make the server-side rendered apps into the single-page apps instantly, just like sprinkling a little magic.

How does it work?

When the first time users visit the pages of the app, the app returns the server-side rendered HTML.

Once the app is loaded, the client-side AppRun app switches the app into the single-page app mode. When users click the page links, the app returns the virtual DOM from the server. The client-side AppRun renders the virtual DOM to the real DOM.

How to Make it?

First, we include the Virtual DOM filter attribute in the project. Then, we apply the filter attribute to the server-side routes.

Then, we add a client-side AppRun app to the _Layout.cshtml.

Finally, we wrap the page container with a div element, <div id=”apprun-app”/> for the client-side app to render the page.

That’s all the magic you need!

To summarize, the server-side virtual DOM attribute does content negotiation. When the requests are JSON requests, it converts the pages into virtual DOM. Otherwise, it returns the HTML of the pages. The client-side app switches the app into the SPA mode by changing the behavior of the navigation menus from hyperlinks to the JSON requests. When the server returns the virtual DOM, the client-side app diffs and renders the virtual DOM to the real DOM.

It is a straightforward solution to building SPAs out of server-side MVC apps. There are no needs of the data API or client-side templates. Best of all, it is non-destructive to your existing application logic.

Source Code

Download and try it yourself. https://github.com/yysun/apprun-ssr-aspnet-core

Also, if you have the non-Core version of ASP.NET MVC 5.x applications, you can do the same. https://github.com/yysun/apprun-ssr-aspnet

I plan to create a NuGet package to make it even easier to use, but I cannot wait to share the idea to those might have interests earlier.

Conclusion

AppRun is a powerful client-side framework. It can instantly make server-rendered applications into the single-page applications.

The same idea applies to the applications using other server-side technologies. I have successfully implemented the concept to Wordpress applications. I am working on express.js (Node.js) and Laravel (PHP) examples. I will write posts about them in the future. Stay tuned.

For more information about AppRun, please visit https://github.com/yysun/apprun.

Have fun!