There are benefits to both approaches. When using a datasource as microflow, I tend to only do this when im creating new objects. The microflow for this is really short and there are no delays when executing it.
For using a datasource as context, I almost always use this so i can run complex logic before rendering the page. This prevents the user from navigating to an empty page and having to wait for data to populate. Another benefit is when you are pass executing the microflow, you can use parameters from a different page. So in your example, I can pass a parameter from page 1 to the microflow connected to the button, and use that to execute logic.
Hope that helps!
Another difference is when and how often the microflows will be triggered.
The microflow will be triggered/processed only once: when the user will click on the button to show the Page 2.
The DataSource Microflow will be triggered/processed EVERY TIME you reload the page or get a change within the page with a "Refresh in client".
For example, if within your Page 2 you have a field with an "On Change" event to calculate a value automatically, you may need to "Refresh in client" to show the change, and in this case your DataSource Microflow will be triggered.