I'm currently working on a project and ran into a problem regarding rendering. Basically, I want to create a REST API that's consumed by a FrontEnd Framework such as Vue.js, Angular, etc (or by an Android App later on...). I wanted to create a "fallback", though, where the site would work without JavaScript as well, for all the people that don't use JavaScript.

Let's assume:

Business Logic

function getPosts() {
    return Post::all();
}

API Controller

function index() {
    return $this->businessLogic->getPosts();
}

Controller

(version 1, returns a view that includes the FrontEnd Framework to make an API call)

function index() {
    view('posts.index');
}

Controller

(version 2)

function index() {
    $posts = $this->businessLogic->getPosts();
    view('posts.index', ["posts" => $posts]);
}

So the problem is quite obvious. Basically, Controller v1 returns an "empty" view that makes a FrontEnd API call to then render the page, while Controller v2 uses server side rendering without using any JavaScript. How do I resolve this? I could create yet another Controller, so I would have:

• API Controller
• Controller that serves an empty View for JavaScript
• Controller that uses server side rendering

But then the problem is that I would have to do conditional routing depending on the client's possibility of rendering JavaScript...

Any ideas?